在 CSS 坐标系中,从左到右为 X 轴正方向,从上到下为 Y 轴正方向,从屏幕里到屏幕外为 Z 轴正方向。
当观察者视线方向顺着 X 轴正方向,rotateX 为正表示元素逆时针旋转,为负表示元素顺时针方向旋转;
当观察者视线方向顺着 Y 轴正方向,rotateY 为正表示元素逆时针旋转,为负表示元素顺时针方向旋转;
当观察者视线方向顺着 Z 轴正方向,rotateZ 为正表示元素逆时针旋转,为负表示元素顺时针方向旋转。
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>CSS3立方体旋转动画</title>
<style>
* {
margin: 0 auto;
padding: 0;
}
div.wrap {
width: 120px;
height: 120px;
position: absolute;
left: 50%;
top: 50%;
transform: translateX(-50%) translateY(-50%); /*利用位移来处理垂直水平居中*/
}
.wrap > div.cube {
width: 120px;
height: 120px;
position: relative;
transform-style: preserve-3d;
transform: rotateX(-50deg) rotateY(-50deg) rotateZ(0deg); /*旋转*/
animation: move 20s infinite linear; /*动画*/
}
/*关键帧*/
@keyframes move {
0% {
transform: rotateX(0deg) rotateY(0deg);
}
100% {
transform: rotateX(360deg) rotateY(360deg);
}
}
.cube > div {
width: 100%;
height: 100%;
position: absolute;
opacity: 0.8;
transition: all 0.4s ease-in-out, box-shadow 0.4s ease-in-out; /*过渡 属性 时间 过渡曲线*/
}
.cube div.out-front {
transform: translateZ(60px); /*转换 位移*/
}
.cube div.out-back {
transform: translateZ(-60px) rotateY(180deg); /*转换 位移 旋转*/
}
.cube div.out-left {
transform: translateX(-60px) rotateY(-90deg);
}
.cube div.out-right {
transform: translateX(60px) rotateY(90deg);
}
.cube div.out-top {
transform: translateY(-60px) rotateX(90deg);
}
.cube div.out-bottom {
transform: translateY(60px) rotateX(-90deg);
}
</style>
</head>
<body>
<div class="wrap">
<div class="cube">
<div class="out-front"><img src="https://files-cdn.cnblogs.com/files/cjsblog/cube01.bmp"></div>
<div class="out-back"><img src="https://files-cdn.cnblogs.com/files/cjsblog/cube02.bmp"></div>
<div class="out-left"><img src="https://files-cdn.cnblogs.com/files/cjsblog/cube03.bmp"></div>
<div class="out-right"><img src="https://files-cdn.cnblogs.com/files/cjsblog/cube04.bmp"></div>
<div class="out-top"><img src="https://files-cdn.cnblogs.com/files/cjsblog/cube05.bmp"></div>
<div class="out-bottom"><img src="https://files-cdn.cnblogs.com/files/cjsblog/cube06.bmp"></div>
</div>
</div>
</body>
</html>
请注意看 out-front(cube01)
的左边,也就是 out-left(cube03)
,
其 transform 值有translateX(-60px),以及 out-front(cube01) 的右边,也就是 out-right(cube04)
,
其 transform 值有 translateX(60px),说明从左到右为 X 轴正方向;
out-front(cube01) 的上边,也就是 out-top(cube05)
,
其 transform 值有 translateY(-60px),以及 out-front(cube01) 的下边,也就是 out-bottom(cube06)
,
其 transform 值有translateY(60px),说明从上到下为 Y 轴正方向;
out-front(cube01) 其 transform 值有 translateZ(60px),out-back(cube02) 其 transform 值有 translateZ(-60px),
说明从屏幕里到屏幕外为 Z 轴正方向。
而且,out-left(cube03) 的 transform 有值 rotateY(-90deg),out-right(cube04) 的 transform 有值 rotateY(90deg),
印证了当观察者视线方向顺着 Y 轴正方向,rotateY 为正表示元素逆时针旋转,为负表示元素顺时针方向旋转;
同样,out-top(cube05) 的 transform 有值 rotateX(90deg),out-bottom(cube06) 的 transform 有值 rotateX(-90deg),
印证了当观察者视线方向顺着 X 轴正方向,rotateX 为正表示元素逆时针旋转,为负表示元素顺时针方向旋转;
该样例中没有用到rotateZ,读者可以试下给 out-front(cube01) 的 div 加上 ratateZ,就能明显地查看到效果,
.cube div.out-front {
transform: translateZ(60px) rotateZ(90deg); /*转换 位移*/
}
从效果来看也印证了当观察者视线方向顺着 Z 轴正方向,rotateZ 为正表示元素逆时针旋转,为负表示元素顺时针方向旋转。