本文共 3466 字，大约阅读时间需要 11 分钟。

一、CSS3 2D变形（利用Transfrom方法）

1、rotate（angle）

元素顺时针旋转给定的角度。允许负值，元素将逆时针旋转。

效果如图

如果当rotate里面的值为负数时，比如ratate（-10deg），效果如图：

2、 translate(x,y)方法

通过 translate() 方法，元素从其当前位置移动，根据给定的 left（x 坐标） 和 top（y 坐标） 位置参数。也就是相对于页面左部和顶部的距离

效果如下

初次之外还有其他的参数

transform: translate(200px);

如果只带一个参数，这个参数代表的是x方向位移值，y方向位移为0

transform: translateX(200px);

对X方向移动

transform: translateY(200px);

对Y方向移动

3、scale() 方法

通过 scale() 方法，元素的尺寸会增加或减少，根据给定的宽度（X 轴）和高度（Y 轴）参数

效果如图

可以看到，长边变为了原来的两倍，宽边变为了原来的0.5倍

transform: scale(1.5)；x轴和y轴都放大1.5倍

transform: scaleX(1.5)；x轴放大1.5倍 transform: scaleY(1.5)；y轴放大1.5倍

4、 skew() 方法

通过 skew() 方法，元素翻转给定的角度，根据给定的水平线（X 轴）和垂直线（Y 轴）参数。

效果如图

意思就是：围绕 X 轴把元素翻转 30 度，围绕 Y 轴翻转 30 度。可能看起来比较抽象

transform: skew(230deg);如果只带一个参数，只有x轴方向的扭曲

transform: skewX(230deg); 对X轴进行翻转 transform: skewY(230deg); 对Y轴进行翻转

其实还是很好理解的，比如两个图叠加在一起

可以看到，所谓的X轴翻转，其实就是x方向的移动，上面的线向左移动5px，下面的线向右移动5px，加入Y也一样 比如：transform: skew(0deg,5deg); 左边的线向上移动5px，右边的线向下移动5px，同时改变时 transform: skew(5deg,5deg);

最好记的方式就是对角线的同时移动，左上右下是排斥，左下右上是吸引

5、matrix() 方法

matrix() 方法把所有 2D 转换方法组合在一起。 matrix() 方法需要六个参数，包含数学函数，允许您：旋转、缩放、移动以及倾斜元素。

如题：将div右移100px,下移200px，旋转30度，x轴缩放1.5倍，y轴缩放2倍。

（1）transform: translate(100px, 200px) rotate(30deg) scale(1.5, 2);

（2）transform: matrix(1.299, 0.75, -1, 1.732, 100, 200)

计算方法

效果如图

6、transform-origin 属性

允许你改变被转换元素的位置 语法： transform-origin: x-axis y-axis z-axis; 属性值： x-axis ：定义视图被置于 X 轴的何处。可能的值：left，center，right，length，%。 y-axis ：定义视图被置于 Y 轴的何处。可能的值：top，center，bottom，length，%。 z-axis ：定义视图被置于 Z 轴的何处。可能的值：length。

效果如图

形象的来说，就是规定你从哪个角开始旋转，比如规定右下角旋转，则图形以右下角为旋转角，顺时针旋转60°

二、CSS3 3D变形

1、perspective属性

perspective 属性定义 3D 元素距视图的距离，以像素计。该属性允许您改变 3D 元素查看 3D 元素的视图。 当为元素定义 perspective 属性时，其子元素会获得透视效果，而不是元素本身。 注释：perspective 属性只影响 3D 转换元素。 语法： perspective: number|none; 属性值： number ：元素距离视图的距离，以像素计。 none ：默认值。与 0 相同。不设置透视

效果如图

2、trasform-style属性

transform-style 属性规定如何在 3D 空间中呈现被嵌套的元素。 注释：该属性必须与 transform 属性一同使用。 语法： transform-style: flat|preserve-3d; 属性值： flat ：子元素将不保留其 3D 位置。 preserve-3d ：子元素将保留其 3D 位置。

    
           
   
    
    
     div1        
     
      div2
     
    
    
   

效果如图

3、CSS3过渡

transition 属性是一个简写属性，用于设置四个过渡属性： transition-property：规定设置过渡效果的 CSS 属性的名称。 transition-duration：规定完成过渡效果需要多少秒或毫秒。 transition-timing-function：规定速度效果的速度曲线。 transition-delay：定义过渡效果何时开始。 注释：请始终设置 transition-duration 属性，否则时长为 0，就不会产生过渡效果。 语法： transition: property duration timing-function delay;

或者

可以自行实验一下

4、CSS3动画

使用@keyframes

通过 @keyframes 规则，您能够创建动画。 创建动画的原理是，将一套 CSS 样式逐渐变化为另一套样式。 在动画过程中，您能够多次改变这套 CSS 样式。 以百分比来规定改变发生的时间，或者通过关键词 “from” 和 “to”，等价于 0% 和 100%。 0% 是动画的开始时间，100% 动画的结束时间。 为了获得最佳的浏览器支持，您应该始终定义 0% 和 100% 选择器。

或者

animation:move 5s ease-in-out 500ms 2 alternate

move：表示animation-name ，动画名称

5s：表示animation-duration，时长

ease-in-out：表示animation-timing-function 规定动画的速度曲线

（ 除此以外还有： linear：动画从头到尾的速度是相同的。 ease：默认。动画以低速开始，然后加快，在结束前变慢。 ease-in：动画以低速开始。 ease-out：动画以低速结束。 ease-in-out：动画以低速开始和结束。 ）

500ms：表示animation-delay，规定在动画开始之前的延迟。

2 ：表示animation-iteration-count，规定动画应该播放的次数。

alternate：表示animation-direction，规定是否应该轮流反向播放动画，如果 animation-direction 值是 “alternate”，则动画会在奇数次数（1、3、5 等等）正常播放，而在偶数次数（2、4、6 等等）向后播放。。

转载地址：http://zfvrn.baihongyu.com/