用途
translateX() 规定X轴上的移动。
语法
rotate(t)
值
值 | 描述 |
---|---|
t | 规定移动距离 |
例子
/* 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); //旋转轴的 X 坐标 50个像素。 }
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); }
}
执行结果