CSS3 03-2D和3D的使用

1. 过渡(CSS3) transitio

属性	描述	CSS
transition	简写属性，用于在一个属性中设置四个过渡属性。	3
transition-property	规定应用过渡的 CSS 属性的名称。	3
transition-duration	定义过渡效果花费的时间。默认是 0。	3
transition-timing-function	过渡方式默认是 "ease"。	3
transition-delay	延迟时间。默认是 0。	3

手风琴案例

2. 2D变形(CSS3) transform

transform是CSS3中具有颠覆性的特征之一，可以实现元素的位移、旋转、倾斜、缩放，甚至支持矩阵方式，配合过渡和即将学习的动画知识，可以取代大量之前只能靠Flash才可以实现的效果。

transform 变换 变形的意思

2.1 移动 translate(x, y)

平移：transform:translate(x,y)

2.2 缩放 scale(x, y) （0~1）

注意: scale()的取值默认的值为1，当值设置为0.01到0.99之间的任何值，作用使一个元素缩小；而 任何大于1的值，作用是让元素放大。

2.3 旋转 rotate(deg)

语法	意义
rotate(angle)	定义 2D 旋转，在参数中规定角度。

可以对元素进行旋转，正值为顺时针，负值为逆时针；

注意单位是 deg 度数

旋转风车

2.4 transform-origin可以调整元素转换变形的原点

名称	值	描述
x	位置	（left、center、right）/ 百分数 / 数值 x 轴基点坐标
y	位置	（top、center、bottom）/ 百分数 / 数值 y 轴基点坐标

如果是4个角，可以用 left top这些，如果想要精确的位置， 可以用 px 像素。

2.5 倾斜 skew(deg, deg)

可以使元素按一定的角度进行倾斜，可为负值，第二个参数不写默认为0。

• skew（30deg，0）：是表示只在X轴(方向)倾斜，逆时针旋转　

• skew（-30deg，0）：是表示只在X轴(方向)倾斜，顺时针旋转　　

• skew（0，30deg）：是表示只在Y轴(方向)倾斜，顺时针旋转　

• skew（0，-30deg）：是表示只在Y轴(方向)倾斜，逆时针旋转

  　　

1、skewX() ： 按给定的角度沿X轴指定斜切变换。skewX是使元素以其中心为基点，并在水平方向（X轴）进行扭曲变行。如：transform:skewX(30deg)

2、skewY() ： 按给定的角度沿Y轴指定斜切变换。skewY是用来设置元素以其中心为基点并按给定的角度在垂直方向（Y轴）扭曲变形。如：transform:skewY（10deg）

3. 3D变形(CSS3) transform

单记住他们的坐标：

x左边是负的，右边是正的

y 上面是负的， 下面是正的

z 里面是负的， 外面是正的

或者用左手法则也行：伸出左手，大拇指指向正轴方向，四个手指的指向即是旋转正向，但务必记住是左手！为正顺时针旋转，为负，逆时针旋转。

3.1 rotateX()

就是沿着 x 立体旋转.

3.2 rotateY()

沿着y轴进行旋转

3.3 rotateZ()

沿着z轴进行旋转

3.4 透视(perspective)

电脑显示屏是一个2D平面，图像之所以具有立体感（3D效果），其实只是一种视觉呈现，通过透视可以实现此目的。

透视可以将一个2D平面，在转换的过程当中，呈现3D效果。

• 透视原理： 近大远小 。

• 浏览器透视：把近大远小的所有图像，透视在屏幕上。

• perspective：视距，表示视点距离屏幕的长短。视点，用于模拟透视效果时人眼的位置

perspective 一般作为一个属性，设置给父元素，作用于所有3D转换的子元素

3.5 背部可见性:backface-visibility 

值	描述
visible（默认）	背面是可见的。
hidden	背面是不可见的。

开门案例

3.6 是否保留3D位置:transform-style

值	描述
flat	子元素将不保留其 3D 位置。
preserve-3d	子元素将保留其 3D 位置。

4. 动画(CSS3) animation：

小汽车案例

 

充电小球案例: