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

鬼畜的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

添加回答

代码语言

举报

0/150
提交
取消
微信客服

购课补贴
联系客服咨询优惠详情

帮助反馈 APP下载

慕课网APP
您的移动学习伙伴

公众号

扫描二维码
关注慕课网微信公众号