rotate3d()
规定3D 旋转。
语法
rotate3d(x,y,z,angle)
值
| 值 | 描述 |
|---|---|
| x | 规定围绕X轴旋转的矢量值。 |
| y | 规定围绕Y轴旋转的矢量值。 |
| z | 规定围绕Z轴旋转的矢量值。 |
| angle | 规定旋转的角度。一个正数的角度表示顺时针旋转，负数的角度表示逆时针旋转。 |
例子
HTML
<div class="stage"> <div class="box"></div> </div>
CSS
.stage{width:100px;height:100px;}
.box {
width:50px; height:50px;
background:red;
animation:flipAround 4s infinite;
transform-origin:right;
}
@keyframes 'flipAround' {
25% {
transform-origin:right;
animation-mode:forwards;
transform:rotateY(-180deg);
}
25.001% {
transform-origin:bottom;
transform:translateX(50px);
}
50% {
transform-origin:bottom;
transform:translateX(50px) rotateX(-180deg);
}
50.001% {
transform-origin:left;
transform:translateX(50px) translateY(50px);
}
75% {
transform-origin:left;
transform:translateX(50px) translateY(50px) rotateY(180deg);
}
75.001% {
transform-origin:top;
transform:translateY(50px);
}
100% {
transform-origin:top;
transform:translateY(50px) rotateX(180deg);
}
}
执行结果