CSS3中的rotate方法能不能实现围绕对角线旋转?-问答-阿里云开发者社区-阿里云

开发者社区> 问答> 正文

CSS3中的rotate方法能不能实现围绕对角线旋转?

小旋风柴进 2016-06-07 13:40:09 1677

请教大家....对于一个矩形,要以从左上到右下的对角线为轴进行旋转,要怎么设置rotateX(),rotateY(),rotateZ()的参数??
或者是别的方法??

css的方法 不能css css旋转 ota旋转
分享到
取消 提交回答
全部回答(2)
  • wjin06
    2019-07-17 19:29:52

    假设对角线角度为ang,transform: rotate(ang deg) scale(-1,1)就好

    0 0
  • 小旋风柴进
    2019-07-17 19:29:52
     <!DOCTYPE html>
    <html lang="zh-CN">
    <head>
        <meta charset="UTF-8"/>
        <meta http-equiv="X-UA-Compatible" content="IE=edge"/>
        <meta name="author" content="liyanan"/>
        <title>测试</title>
        <style>
    
            #div1{
                position:absolute;
                left:40%;
                top:30%;
                animation:rdiv 4s infinite ;
            }
            #div2{
                background-color:red;
                width:100px;
                height:100px;
                transform:rotateZ(45deg);
            }
    
            @keyframes rdiv{
                0%{
                    transform:rotateX(0deg);
                }
                25%{
                    transform:rotateX(90deg);
                }
                50%{
                    transform:rotateX(180deg);
                }
                75%{
                    transform:rotateX(270deg);
                }
                100%{
                    transform:rotateX(360deg);
    
                }
            }
        </style>
        </head>
    <body>
        <div id="div1">
            <div id="div2"></div>
        </div>
    </body>
    </html>
    0 0
添加回答
云计算
使用钉钉扫一扫加入圈子
+ 订阅

时时分享云计算技术内容,助您降低 IT 成本,提升运维效率,使您更专注于核心业务创新。

最新问题