CSS3 基础（3）——2D3D

CSS3 2D 转换

代码 效果图

translate()方法，根据左(X轴)和顶部(Y轴)位置给定的参数，从当前元素位置移动。

代码

rotate()方法，在一个给定度数顺时针旋转的元素。负值是允许的，这样是元素逆时针旋转。

代码

scale()方法，该元素增加或减少的大小，取决于宽度（X轴）和高度（Y轴）的参数。

代码

skew() 方法，包含两个参数值，分别表示X轴和Y轴倾斜的角度，如果第二个参数为空，则默认为0，参数为负表示向相反方向倾斜。

skewX();表示只在X轴(水平方向)倾斜。

skewY();表示只在Y轴(垂直方向)倾斜。

代码

matrix() 方法，matrix()方法把2D变换所有方法合并成一个。

matrix 方法有六个参数，包含旋转，缩放，移动（平移）和倾斜功能。

2D方法总结图

CSS3 3D 转换

rotateX()方法，围绕其在一个给定度数X轴旋转的元素。

代码

rotateY()方法，围绕其在一个给定度数Y轴旋转的元素。

代码

转换属性

3D 转换方法

CSS3 过渡——transition

CSS3 过渡是元素从一种样式逐渐改变为另一种的效果。要实现这一点，必须规定两项内容：

1、指定要添加效果的CSS属性

2、指定效果的持续时间。

transition复合属性：transition-property  transition-duration   transition-timing-function  transition-delay

CSS3动画

CSS3 @keyframes 规则：要创建CSS3动画，你将不得不了解@keyframes规则。@keyframes规则是创建动画。 @keyframes规则内指定一个CSS样式和动画将逐步从目前的样式更改为新的样式。

当在 @keyframes 创建动画，把它绑定到一个选择器，否则动画不会有任何效果。

指定至少这两个CSS3的动画属性绑定向一个选择器：

1、规定动画的名称。 2、规定动画的时长

代码 效果图中的截图，5秒从红变黄   @keyframes中不用from..to..表示 用百分比表示样式的变化   会简单的移动一圈

CSS3动画属性：属性详细描述

所有属性例子 上述例子简写模式