首页
学习
活动
专区
圈层
工具
发布

translateY()——动画示例

用途

translateY() 规定Y轴上的移动

语法

代码语言:javascript
复制
translateY(t)

描述

t

规定移动距离。

例子

代码语言:javascript
复制
/* 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); } 
}

执行结果

下一篇
举报
领券