css3 旋转(css翻转效果)

本篇文章给大家谈谈css3 旋转，以及css翻转效果对应的知识点，文章可能有点长，但是希望大家可以阅读完，增长自己的知识，最重要的是希望对各位有所帮助，可以解决了您的问题，不要忘了收藏本站喔。

css3 翻转和旋转的区别

css3翻转和旋转的区别如下：

概述：css3中的transform中有旋转，放缩，倾斜，平移的功能，分别对应的属性是：rotate，scale，skew，translate

1、旋转，利用rotate来实现，代码如下：

-webkit-transform:rotate(10deg);指定浏览器内核为webkit的翻转方式

-moz-transform:rotate(10deg);指定firefox浏览器私有属性

transform:rotate(10deg);一般浏览器翻转的角度为10弧度

2、翻转，利用scale来实现，代码如下：

scale本来是放缩的意思，原来括弧里面（1，1）前者表示X轴，后者表示Y轴，当数字大于1时放大，大于0并小于1时缩小，负数代表翻转

水平翻转：

-webkit-transform:scale(-1，1);水平轴为-1，代表水平翻转

-moz-transform:scale(-1，1);水平轴为-1，代表水平翻转

transform:scale(-1，1);水平轴为-1，代表水平翻转

垂直翻转：

-webkit-transform:scale(1，-1);垂直轴为-1，代表垂直翻转

-moz-transform:scale(1，-1);垂直轴为-1，代表垂直翻转

transform:scale(1，-1);垂直轴为-1，代表垂直翻转

css3中怎样定义动画的旋转中心点

我们没有使用transform-origin改变元素原点位置的情况下，CSS变形进行的旋转、移位、缩放等操作都是以元素自己中心（变形原点）位置进行变形的。但很多时候需要在不同的位置对元素进行变形操作，我们就可以使用transform-origin来对元素进行原点位置改变，使元素原点不在元素的中心位置，以达到需要的原点位置。如果我们把元素变换原点（transform-origin）设置0（x） 0（y），这个时候元素的变换原点转换到元素的左顶角处。改变transform-origin属性的X轴和Y轴的值就可以重置元素变形原点位置，其基本语法如下所示:`transform-origin：[<percentage>|<length>| left| center| right| top| bottom]| [<percentage>|<length>| left| center| right]| [[<percentage>|<length>| left| center| right]&& [<percentage>|<length>| top| center| bottom]]<length>?`transform-origin属性值可以是百分比、em、px等具体的值，也可以是top、right、bottom、left和center这样的关键词。2D的变形中的transform-origin属性可以是一个参数值，也可以是两个参数值。如果是两个参数值时，第一值设置水平方向X轴的位置，第二个值是用来设置垂直方向Y轴的位置。3D的变形中的transform-origin属性还包括了Z轴的第三个值。其各个值的取值简单说明如下： x-offset：用来设置transform-origin水平方向X轴的偏移量，可以使用<length>和<percentage>值，同时也可以是正值（从中心点沿水平方向X轴向右偏移量），也可以是负值（从中心点沿水平方向X轴向左偏移量）。 offset-keyword：是top、right、bottom、left或center中的一个关键词，可以用来设置transform-origin的偏移量。 y-offset：用来设置transform-origin属性在垂直方向Y轴的偏移量，可以使用<length>和<percentage>值，同时可以是正值（从中心点沿垂直方向Y轴向下的偏移量），也可以是负值（从中心点沿垂直方向Y轴向上的偏移量）。 x-offset-keyword：是left、right或center中的一个关键词，可以用来设置transform-origin属性值在水平X轴的偏移量。 y-offset-keyword：是top、bottom或center中的一个关键词，可以用来设置transform-origin属性值在垂直方向Y轴的偏移量。 z-offset：用来设置3D变形中transform-origin远离用户眼睛视点的距离，默认值z=0，其取值可以<length>，不过<percentage>在这里将无效。

css3系列之transform 详解rotate

rotate

rotateX

rotateY

rotateZ

rotate3d

rotate：

旋转该元素，配合着transform-origin属性，transform-origin是设置旋转点的。(没有设置transform-origin属性也可以，只不过是根据该元素的中心点旋转，也就是center center)

加上 transform-origin设置旋转点。transform-origin是根据自己而定位的，所以 0px 0px就是左上角那个点。

rotateX：

讲这个之前呢，先普及一个知识，在transform里面，x y z轴，分别是什么样子的，他跟我们平常的 x和 y不太一样，因为，他是倒着的。 Z轴呢，在0那个位置，因为他是3D的，看下面的图，转个身就知道在那里了。

接下来，看看所谓的 Z轴是什么

rotateX的X呢，可以写成大写的，也可以写成小写的x，没有影响，这个属性呢，你加上rotateX之后，这个元素，就会以 X轴旋转，里面填的是角度。

这样看起来，好像不是那么直观，毕竟是2D的图，来给他加了3D的效果看看，(由于设置了 transform-origin：0 0，所以并不会在元素的中间旋转，而是以 0 0点的那条x轴旋转)

上面两个图，第一个图是在 2d的情况下观看的，第二个图是 3d的时候，是不是 3d看起来比较直观。

那么，接下来，加上Y一起使用，rotateX(45deg) rotateY(45deg)，这两个合在一起什么意思呢，这个元素，先按照 X轴，旋转45度，然后再按照Y轴，旋转45度，那么接下来的结果会是怎么样呢？

由于我设置的 transform-origin：center center；定的点在中心，那么两条轴，是会成这样子的。

然后，看下，结果，是不是如我们所示？

最后，加上rotateZ

rotate3D：

设置一条主轴，然后根据这条轴旋转

这个呢，可以设置4个参数，前三个是，x y z最后一个是角度deg但是，此 x y z，可不是上面那几个，不一样的。这三个值，设置的是矢量的方向，填什么无所谓，主要是比值很重要。举个例子 1，1，0，0deg那么就是 1：1：0= 100：100：0对吧，拿这个值来图解比较好。

OK，本文到此结束，希望对大家有所帮助。