开发者社区> 问答> 正文

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

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

展开
收起
小旋风柴进 2016-06-07 13:40:09 2421 0
2 条回答
写回答
取消 提交回答
  • 假设对角线角度为ang,transform: rotate(ang deg) scale(-1,1)就好

    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>
    2019-07-17 19:29:52
    赞同 展开评论 打赏
问答标签:
问答地址:
问答排行榜
最热
最新

相关电子书

更多
零基础CSS入门教程 立即下载
低代码开发师(初级)实战教程 立即下载
阿里巴巴DevOps 最佳实践手册 立即下载