用途
translateY() 规定Y轴上的移动
语法
translateY(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); }
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); //旋转轴的 Y 坐标 50个像素。 }
100% {
transform-origin:top;
transform:translateY(50px) rotateX(180deg); }
}
执行结果