标签：正方体 translateZ 100px 90deg transform rotateY stage 3d
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<meta http-equiv="X-UA-Compatible" content="ie=edge" />
<title>Document</title>
<style>
body {
perspective: 800px;
text-align:center;
}
.stage {
position: relative;
width: 200px;
height: 200px;
margin: 400px auto;
box-shadow: 0 0 15px #000 inset;
transform-style: preserve-3d;
transition: 2s;
}
/*注意：因为 position，所有的 transform 都是相对于父级元素来变化，因此把父级元素设置为舞台。*/
.stage:hover {
transform: rotateY(180deg);
}
.stage:hover .face5 {
transform: translateZ(100px) translateY(-200px);
}
.stage:hover .small1 {
transform: translateZ(100px) translateY(-300px);
}
.stage:hover .small2 {
transform: rotateY(180deg) translateZ(100px) translateY(-300px);
}
.stage:hover .small3 {
transform: rotateY(-90deg) translateZ(100px) translateY(-300px);
}
.stage:hover .small4 {
transform: rotateY(90deg) translateZ(100px) translateY(-300px);
}
.stage:hover .small5 {
transform: rotateX(90deg) translateZ(400px);
}
.stage:hover .small6 {
transform: rotatex(-90deg) translateZ(-200px);
}
.face {
position: absolute;
width: 200px;
height: 200px;
box-shadow: 0 0 20px #554ee9 inset;
transition: 2s;
}
.small {
position: absolute;
right: 50px;
bottom: 0px;
width: 100px;
height: 100px;
box-shadow: 0 0 5px #000 inset;
transition: 2s;
}
.face1 {
transform: translateZ(100px);
}
.face2 {
transform: rotateY(180deg) translateZ(100px);
}
.face3 {
transform: rotateY(-90deg) translateZ(100px);
}
.face4 {
transform: rotateY(90deg) translateZ(100px);
}
.face5 {
transform: rotateX(90deg) translateZ(100px);
}
.face6 {
transform: rotatex(-90deg) translateZ(100px);
}
.small1 {
transform: translateZ(50px);
}
.small2 {
transform: rotateY(180deg) translateZ(50px);
}
.small3 {
transform: rotateY(-90deg) translateZ(50px);
}
.small4 {
transform: rotateY(90deg) translateZ(50px);
}
.small5 {
transform: rotateX(90deg) translateZ(50px);
}
.small6 {
transform: rotatex(-90deg) translateZ(50px);
}
</style>
</head>
<body>
<div class="stage">
<div class="face1 face">前</div>
<div class="face2 face">后</div>
<div class="face3 face">左</div>
<div class="face4 face">右</div>
<div class="face5 face">上</div>
<div class="face6 face">下</div>
<div class="small1 small">前</div>
<div class="small2 small">后</div>
<div class="small3 small">左</div>
<div class="small4 small">右</div>
<div class="small5 small">上</div>
<div class="small6 small">下</div>
</div>
</body>
</html>
标签：正方体,
translateZ,
100px,
90deg,
transform,
rotateY,
stage,
3d
From： https://www.cnblogs.com/xzemt/p/18030119