2 u014448229 u014448229 于 2016.03.11 10:54 提问

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

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

或者是别的方法??

2个回答

sinat_34254650
sinat_34254650   2016.03.14 14:17

改变transform-origin属性的X轴和Y轴的值就可以重置元素变形原点位置。原点(transform-origin)设置0(x) 0(y)就是左上角为原点进行旋转。只能以点为基准旋转。

qq_19891827
qq_19891827   2016.03.15 12:58
 <!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>
Csdn user default icon
上传中...
上传图片
插入图片
准确详细的回答,更有利于被提问者采纳,从而获得C币。复制、灌水、广告等回答会被删除,是时候展现真正的技术了!