欢迎使用CSDN-markdown编辑器

最新推荐文章于 2023-02-07 15:51:40 发布

aiwodejiulai

最新推荐文章于 2023-02-07 15:51:40 发布

阅读量248

点赞数

分类专栏： css3 动画文章标签： css3 动画 animation rotate transform

本文链接：https://blog.csdn.net/aiwodejiulai/article/details/47146065

版权

动画同时被 2 个专栏收录

1 篇文章 0 订阅

订阅专栏

css3

0 篇文章 0 订阅

订阅专栏

CSS3 animation（1）平面旋转rotate

transform：rotate()：指定对象的2D rotation（2D旋转）
transform:(180deg) 就是转180度的意思，当然这是静态的。如何要让它旋转起来呢，那就需要和animation配合。
比如从0度 5秒内转到360度

div
{
...
animation:myfirst 5s linear infinite;
...
}

其中 myfirst 是指动画的名称与@keyframes对应 5s指动画的周期 linear指动画的速度是匀速 infinite指动画的执行次数为无限次

@keyframes myfirst
{
    from{transform:rotate(0deg);}
    to{transform:rotate(360deg);}

}

从0度到360度
以下附上全部代码

<!DOCTYPE html>
<html>
<head>
<style> 
div
{
width:100px;
height:100px;
background:red;
animation:myfirst 5s linear infinite;
-moz-animation:myfirst 5s linear infinite; /* Firefox */
-webkit-animation:myfirst 5s linear infinite; /* Safari and Chrome */
-o-animation:myfirst 5s linear infinite; /* Opera */
}

@keyframes myfirst
{
    from{transform:rotate(0deg);}
    50%{transform:rotate(180deg);}
    to{transform:rotate(360deg);}

}

@-moz-keyframes myfirst /* Firefox */
{
    from{-moz-transform:rotate(0deg);}
    50%{ -moz-transform:rotate(180deg);}
    to{  -moz-transform:rotate(360deg);}

}

@-webkit-keyframes myfirst /* Safari and Chrome */
{
    from{-webkit-transform:rotate(0deg);}
    50%{ -webkit-transform:rotate(180deg);}
    to{-webkit-transform:rotate(360deg);}

}

@-o-keyframes myfirst /* Opera */
{
    from{-o-transform:rotate(0deg);}
    50%{ -o-transform:rotate(180deg);}
    to{-o-transform:rotate(360deg);}

}
</style>
</head>
<body>

<div></div>

<p><b>注释：</b>本例在 Internet Explorer 中无效。</p>

</body>
</html>

aiwodejiulai

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
6
评论
欢迎使用CSDN-markdown编辑器

CSS3 animation（1）平面旋转rotatetransform：rotate()：指定对象的2D rotation（2D旋转） transform:(180deg) 就是转180度的意思，当然这是静态的。如何要让它旋转起来呢，那就需要和animation配合。比如从0度 5秒内转到360度div{...animation:myfirst 5s linear infinite;
复制链接

扫一扫