鬼畜的css3动画

<!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属性给我说明白就好了

西兰花伟大炮

浏览 1702回答 1

1回答

翰术

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

0 0

随时随地看视频慕课网APP