css3动画transform属性(css3动画效果属性)

大家好，如果您还对css3动画transform属性不太了解，没有关系，今天就由本站为大家分享css3动画transform属性的知识，包括css3动画效果属性的问题都会给大家分析到，还望可以解决大家的问题，下面我们就开始吧！

CSS3的transform属性的用法

CSS3 transform是什么？

transform的含义是：改变，使…变形；转换

CSS3 transform都有哪些常用属性？

transform的属性包括：rotate()/ skew()/ scale()/ translate(,)，分别还有x、y之分，比如：rotatex()和 rotatey()，以此类推。

下面我们来分解各个属性的用法：

transform:rotate()：

含义：旋转；其中“deg”是“度”的意思，如“10deg”表示“10度”下同。

.demo_transform1{-webkit-transform:rotate(10deg);-moz-transform:rotate(10deg)}

transform:skew()：

含义：倾斜；

.demo_transform2{-webkit-transform:skew(20deg);-moz-transform:skew(20deg)}

transform:scale()：

含义：比例；“1.5”表示以1.5的比例放大，如果要放大2倍，须写成“2.0”，缩小则为负“-”。

.demo_transform3{-webkit-transform:scale(1.5);-moz-transform:scale(1.5)}

transform:translate()：

含义：变动，位移；如下表示向右位移120像素，如果向上位移，把后面的“0”改个值就行，向左向下位移则为负“-”。

.demo_transform4{-webkit-transform:translate(120px,0);-moz-transform:translate(120px,0)}

transform综合：

transform的常用属性就是这些了，下面我们借助transition的帮忙来演示一个关于css3 transform的综合实例：

.demo_transform5{-webkit-transition:all 1s ease-in-out;-moz-transition:all 1s ease-in-out}

.demo_transform5:hover{-webkit-transform:rotate(360deg) skew(-20deg) scale(3.0)translate(100px,0);-moz-transform:rotate(360deg) skew(-20deg)sca

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对吧，拿这个值来图解比较好。

css3动画transform属性的介绍就聊到这里吧，感谢你花时间阅读本站内容，更多关于css3动画效果属性、css3动画transform属性的信息别忘了在本站进行查找哦。