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币。复制、灌水、广告等回答会被删除,是时候展现真正的技术了!
其他相关推荐
【CSS3】transform-origin以原点进行旋转
CSS3设定原点进行变形操作
圆点围绕圆旋转---css3
Document *{ margin: 0; padding: 0; } .box{ position: relative; width: 300px; height: 300px; border: 5px solid deepskyblue; border-radius: 50%; } .box i{ display: bl
JS利用CSS3 transform rotate 实现旋转转盘或背景(大转盘抽奖)
最近需要做一个旋转转盘抽奖的小组件,初步考虑之后决定用操作背景元素CSS 中的transform rotate 来做。即控制transform属性不断增加转盘的偏转角度值,来达到转动效果。 使元素围绕中心根据角度偏转,在元素的transform属性中可以这样写: transform:rotate(30deg);//偏转30度 -moz-transform:rotate(30deg);//兼
css3围绕圆形旋转思路
http://codepen.io/tianzi77/pen/yNWYMO http://codepen.io/tianzi77/pen/bdydwK供参考
css3中3d旋转中rotatex,rotatey,rotatez的旋转正方向
rotatex、rotatez的旋转正方向是顺时针,rotatey的旋转正方向是逆时针。
纯css3实现圆点围绕圆圈匀速无限旋转
纯css3实现圆点围绕圆圈匀速无限旋转这个东西只是一个思路,大部分的效果都是通过js实现的,但是这里通过css3实现,其实效果要好得多,而且我建议很多效果如果可以通过css实现,要比js实现的效果要好
CSS3实现围绕任何点来旋转-京东推荐动画
之前在京东首页看到一个推荐动画 觉得还是可以试试使用.其实整个效果还是比较简单的.主要还是控制动画的运作原点. 在这个动画里,我觉得比较有意思的就是这个黑点的旋转.我们这次就来实现这个效果.以为其他效果都是没难度的 我们先来看完整代码 html> head>    meta charset="UTF-8">    title>动画title>    style>
案例:模拟人造卫星沿轨道围绕地球旋转
有小伙伴问到过这样的问题:在工作中遇到了一个需要实现的效果是围绕旋转,就像是人造卫星沿着一定围着地球旋转的效果。这里给这位小伙伴同时也给其他遇到这个问题的小伙伴做一个解答。首先,我们先把需要用到的元素给搭建好,一个地球,一个卫星。简单做一下表示哈。​ 元素其实非常简单,下一步就是要让卫星进行旋转。在这里,我们在页面载入的时候就让卫星开始旋转。看起来好像蛮简单的,但是这里比较难的是让卫星根据我们的想...
小圆围绕大圆360度旋转的2种方法
第一种 :覆盖法 1. ul包含7个li,每个li包含图片和含小圆的span; 2. li、img、div、span都给border-radius:50%,img(图片)的大小要小于li; 3. span(小圆)由一个div包住,div覆盖(定位)到li上面去,div的大小和li大小一样; 4. 给每个li和span定位; 5. div旋转360度,小圆就旋转360度;
unity3d学习之Rotate和RotateAround做地球绕太阳旋转
视频教学来源:www.51cto.com 新建3个Sphere,分别名为sun,earth,moon, 新建2个C#script,分别名为Rotatescr,RotateAroundscr Rotatescr在update()中只写一句 this.transform.Rotate (Vector3.up*1F,Space.World); RotateAroundscr也在