css3transform CSS3的transform属性的用法

很多朋友对于css3transform和CSS3的transform属性的用法不太懂，今天就由小编来为大家分享，希望可以帮助到大家，下面一起来看看吧！

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 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详解translate

translate

translate这个参数的，是transform身上的，那么它有什么用呢？

其实他的作用很简单，就是平移，参考自己的位置来平移

translate()

translateX()

translateY()

translateZ()

translate3d()

translateX

向X轴平移，填正数往右平移，填负数，往左平移

translateY

向Y轴平移，填正数往下平移，填负数，往上平移

translateZ

向Z轴平移，这个可能有点难理解，想像一个场景，你现在和电脑屏幕的距离，这就是Z轴的距离，电脑屏幕离你越近，那么translateZ()里面的值越大，电脑屏幕离你越远， translateZ()的值就越小。所以说，Z增加，那么这个电脑屏幕，离你就越近，

下面要用到旋转，rotate，不懂的话，请点击→ css3系列之transform详解rotate

首先Z轴是朝向我们的，所以看不出效果，但是，我们把它转个身，让Z轴面对右边，就可以了。

translate()和 translate3d()

translate是同时设置 translateX和 translateY，所以里面可以填两个参数，第一个值 X第二个 Y

translate3d是同时设置 translateX，translateY和 translateZ所以里面可以填三个参数

只不过有点不同的是， translate如果第二个参数不填的话，默认是0，不过translate3d的话，人家就不同意你不填了，你三个参数，必须都给我填。

CSS3中translate,transform和translation的区别和联系

translate同其他属性rotate/skew/scale等，构成css中变形的几种方式。translate(x, y)是将dom元素，在原来的基础上，偏移一定距离。translate需要跟transform结合使用。

transformcss中的变形属性

transition是制作居间动画的一种方式，可以指定“渐变”的css属性，如width，height，top，left，opacity，transform等。还可以指定渐变动画的duration（持续时间），delay（推迟时间），渐变函数（ease、ease-in/out、cubic-bezier等）。

举例说明：

将元素向下偏移20像素，向右偏移20像素 transform: translate(20px, 20px);

当对元素应用变形（transform）属性时，延迟一秒后开始动画，动画速度开始慢，然后加速，最后慢慢结束，动画持续300毫秒 transition: transform 300ms ease 1s;此时如果你对元素应用transform: translate(20px, 20px);时，一秒钟后，dom元素会逐渐往右下方向移动，直到距离原来下方20像素，右方20像素的位置后停止，动画持续300毫秒。

关于本次css3transform和CSS3的transform属性的用法的问题分享到这里就结束了，如果解决了您的问题，我们非常高兴。