CSS3旋转动画，兼容各浏览器

时间：2022-11-17 22:36:42
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>CSS3旋转动画</title>
<style>
div{
    width: 200px;
    height: 200px;
    background: yellow;
    transform-origin: 100% 50%;
    -webkit-transform-origin: 100% 50%;
    animation:3s linear 0s myrotate;
    -webkit-animation:3s linear 0s myrotate;/* Safari and Chrome */
    animation-fill-mode:forwards;/*动画播放完毕时停止，不回到初始状态*/
    -webkit-animation-fill-mode:forwards;
}
@keyframes myrotate{
    form {transform:rotateY(0deg);}    
    to    {transform:rotateY(180deg);}
}
@-webkit-keyframes myrotate{/* Safari and Chrome */
    form {transform:rotateY(0deg);}    
    to    {transform:rotateY(180deg);}
}
/*第一个时间代表完成一次运动所消耗的时间，第二个时间代表动画于多少时间后开始播放*/
/*linear代表线性运动（匀速运动）；infinite为无限运动（一直运动）*/
</style>

</head>
<body>
<div>3D旋转</div>
<script type="text/javascript">

</script>
</body>
</html>

 

标签：

相关文章