translateX()
规定X轴上的移动。
语法
translateX(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);
}
}
执行结果