.scene--hero {
height: 200px;
margin: 80px 0;
/**指定用户在z轴观察点到z=0平面的距离*/
perspective: 500px;
/*指定varnishing point ，灭点，平行线在该点相交*/
perspective-origin: 50% 50%;
border: none;
}
.cube {
width: 200px;
height: 200px;
position: relative;
/*子元素位置在3D空间*/
transform-style: preserve-3d;
}
.cube--hero {
margin: 0 auto;
}
/*定义旋转动画*/
.cube.is-spinning {
animation: spinCube 8s infinite linear;
}
/*旋转动画的起始和结束帧，同时按x轴和y轴旋转*/
@keyframes spinCube {
0% { transform: rotateX( 0deg) rotateY( 0deg); }
100% { transform: rotateX(360deg) rotateY(360deg); }
}
.cube__face {
position: absolute;
width: 200px;
height: 200px;
border: 2px solid black;
line-height: 200px;
font-size: 40px;
font-weight: bold;
color: white;
text-align: center;
}
.cube.is-backface-hidden .cube__face {
backface-visibility: hidden;
}
.front { background: hsla( 0, 100%, 50%, 0.7); }
.right { background: hsla( 60, 100%, 50%, 0.7); }
.back { background: hsla(120, 100%, 50%, 0.7); }
.left { background: hsla(180, 100%, 50%, 0.7); }
.top { background: hsla(240, 100%, 50%, 0.7); }
.bottom { background: hsla(300, 100%, 50%, 0.7); }
/*定义各个面如何生成旋转后平移，但是矩阵是先应用平移后旋转*/
.front { transform: rotateY( 0deg) translateZ(100px); }
.right { transform: rotateY( 90deg) translateZ(100px); }
.back { transform: rotateY(180deg) translateZ(100px); }
.left { transform: rotateY(-90deg) translateZ(100px); }
.top { transform: rotateX( 90deg) translateZ(100px); }
.bottom { transform: rotateX(-90deg) translateZ(100px); }
Comments are closed.