欢迎使用CSDN-markdown编辑器

来源：互联网发布：阿里云个人备案照片编辑：程序博客网时间：2024/06/08 00:16

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>

0 0

欢迎使用CSDN-markdown编辑器

CSS3 animation（1） 平面旋转rotate

CSS3 animation（1）平面旋转rotate