为了账号安全,请及时绑定邮箱和手机立即绑定

鬼畜的css3动画

鬼畜的css3动画

西兰花伟大炮 2017-03-06 19:40:10
<!DOCTYPE html> <html>     <head>         <meta charset="UTF-8">         <title>css旋转动画</title>         <style>             .rotateRect{                 position: absolute;                 left: 300px;                 top: 300px;                 animation: rotone 2s linear infinite;                 transform-origin: 150px 150px;             }             .rotateRect em{                 display: block;                 width: 50px;                 height: 50px;                 background-color: #FF8C00;                 animation: rottwo 2s linear infinite;                 }             @keyframes rotone{                 from{transform: rotate(0);}                 to{transform: rotate(360deg);}             }             @keyframes rottwo{                 from{transform: rotate(360deg);}                 to{transform: rotate(0);}             }         </style>     </head>     <body>         <div class="rotateRect"><em></em></div>     </body> </html>感觉背景色晃动是什么问题?还有这个嵌套一个em,一个正着转,一个反转,然后就不转了,什么原因哦?很有意思的东西要是能有人把transform-origin属性给我说明白就好了
查看完整描述

1 回答

?
翰术

TA贡献21条经验 获得超8个赞

旋转需要绕轴转,transform-origin,可以设置那根轴的位置。
对2D来说,只有X和Y (平面) 只能设置X轴和Y轴
对3D来说,还能绕Z轴转

查看完整回答
反对 回复 2017-03-06
  • 1 回答
  • 1 关注
  • 1701 浏览
慕课专栏
更多

添加回答

举报

0/150
提交
取消
意见反馈 帮助中心 APP下载
官方微信