8、CSS 3D 转换

　　(1)、3D 转换

　　2D 转换是元素平面的变化。

　　而 3D 转换是元素立体的变化。

　　2D 和 3D 转换都是元素的形状、尺寸和位置变化的一种效果。

　　注意：IE10+ 以及所有浏览器都支持都支持 3D 转换，IE9 不支持。

　　(2)、rotateX() 方法

　　rotateX()方法，元素围绕其 X 轴以给定的度数进行旋转。

　　下面的例子，将 DIV 元素围绕 X 轴旋转 180 度：

3D rotateX()我是 DIV1 元素我是 DIV2 元素

　　在 Chrome 中显示如下：

　　(3)、rotateY() 方法

　　rotateY() 方法，元素围绕其 Y 轴以给定的度数进行旋转。

　　下面的例子，将 DIV 元素围绕 Y 轴旋转 150 度：

3D rotateY()我是 DIV1 元素我是 DIV2 元素

　　在 Chrome 中显示如下：

　　(4)、转换属性

　　下面是所有的转换属性：

属性 说明

transform 向元素应用 2D 或 3D 转换。

transform-origin 允许改变被转换元素的位置。

transform-style 规定被嵌套元素如何在 3D 空间中显示。

perspective 规定 3D 元素的透视效果。

perspective-origin 规定 3D 元素的底部位置。

backface-visibility 定义元素在不面对屏幕时是否可见。

 

　　(5)、3D 转换方法

函数 说明

matrix3d(n,n,n,n,n,n,n,n,n,n,n,n,n,n,n,n) 定义 3D 转换，使用 16 个值的 4x4 矩阵。

translate3d(x,y,z) 定义 3D 转化。

translateX(x) 定义 3D 转化，仅使用用于 X 轴的值。

translateY(y) 定义 3D 转化，仅使用用于 Y 轴的值。

translateZ(z) 定义 3D 转化，仅使用用于 Z 轴的值。

rotate3d(x,y,z,angle) 定义 3D 旋转。

rotateX(angle) 定义沿 X 轴的 3D 旋转。

rotateY(angle) 定义沿 Y 轴的 3D 旋转。

rotateZ(angle) 定义沿 Z 轴的 3D 旋转。

scale3d(x,y,z) 定义 3D 缩放转换。

scaleX(x) 定义 3D 缩放转换，通过给定一个 X 轴的值。

scaleX(y) 定义 3D 缩放转换，通过给定一个 Y 轴的值。

scaleX(z) 定义 3D 缩放转换，通过给定一个 Z 轴的值。

perspective(n) 定义 3D 转换元素的透视视图。

9、CSS3 过渡

　　(1)、CSS3 过渡

　　CSS3 过渡是元素从一种样式逐渐转变为另一种样式时为元素添加的效果。在 CSS3 之前，要做出这样的效果就必需借助 JS 运动框架来完成，或者使用 Flash 动画。

　　要使用 CSS 来实现这一效果，必须规定两项内容：

　　　　指定要添加效果的 CSS 属性。

　　　　指定效果的持续时间。

　　注意：IE10+ 以及所有浏览器都支持过渡效果，IE9 不支持。在 IE9 下 Duang 一下就变化完了，根本没有说好的过渡，完全就是 hover 效果。

　　(2)、过渡应用

　　下面的例子，是应用于宽度属性的过渡效果，时常为 2s，当鼠标悬停于 div 元素上时改变样式，当鼠标移出元素时，它会逐渐变回原来的样式：

过渡鼠标你过来，我要变化了

　　注意：如果未指定时长，则不会有过渡效果，因为默认值是 0。其实跟 JS 过渡动画 是一个原理。

　　(3)、多项过渡

　　要添加多个样式的过渡效果，添加的多个属性由逗号隔开。

　　下面的例子，添加了宽度、高度、透明度等和旋转的过渡效果：

多项过渡鼠标你过来，我要变化了

　　(3)、过渡属性

　　下表是所有的过渡属性：

属性 说明

transition 简写属性，用于在一个属性中设置四个过渡属性。

transition-property 规定应用过渡的 CSS 属性的名称。

transition-duration 规定过渡效果花费的时间。默认是 0。

transition-timing-function 规定过渡效果的时间曲线，即开始和结束的速度快慢，默认是 "ease"。

transition-delay 规定过渡效果何时开始。默认是 0。

　　(4)、简写属性的使用

　　下面的例子，使用了所有的过渡属性：

多项过渡鼠标你先过来，我准备变化

　　下面的代码，使用了 transition 简写属性，将四个过渡属性写在一个简写属性中：

1 #transit{ 2 transition: width 1s linear 2s; 3 }

 

10、CSS3 动画

　　CSS3 赋予了我们创建动画的能力，他可以取代很多网页动画图片、Flash 动画以及 JavaScript。

　　在 CSS 中一些属性是可以有动画效果的，可用于创建动画和过渡效果。

　　动画属性可以逐渐地从一个值变化到另一个值，比如尺寸大小、数量、百分比和颜色。

　　(1)、CSS3 @keyframes 规则

　　@keyframes 规则用于创建动画，在 @keyframes 中规定某项 CSS 样式，就能创建由当前样式逐渐改为新样式的动画效果。

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

　　通过规定至少以下两项 CSS3 动画属性，即可将动画绑定到选择器：

　　　　规定动画的名称。

　　　　规定动画的时长。

　　注意：IE10+ 以及所有浏览器都支持 @keyframe 规则和 animation 属性。IE9 不支持。

　　下面的例子，把 “myflash” 动画捆绑到 DIV 元素，时长 5s，当动画完成时，会变回初始样式：

动画 from{ }

　　注意：必须定义动画的名称和动画的持续时间，如果省略了动画时长，动画则无法运行，因为默认值是 0。

　　(2)、CSS3 动画

　　动画是使元素从一种样式逐渐变化为另一种样式的效果。

　　可以改变任意多的样式，以及任意多的次数。

　　可以使用百分比来规定变化发生的时间，或用关键词 "from" 和 "to"，等同于 0% 和 100%。

　　0% 是动画的开始，100% 是动画的完成。

　　为了得到最佳的浏览器支持，所以应该始终定义 0% 和 100% 选择器。

　　下面的例子，当动画为 25% 及 50% 时改变背景色，然后当动画 100% 完成时再次改变：

动画}

　　下面的例子，改变背景色和位置：

动画}

　　(3)、CSS3 动画属性

　　下面是 CSS3  的所有动画属性：

属性 说明

@keyframes 规定动画。

animation 所有动画属性的简写属性，除了 animation-play-state 属性。

animation-name 规定 @keyframes 动画的名称。

animation-duration 规定动画完成一个周期所花费的秒或毫秒。默认是 0。

animation-timing-function 规定动画的速度曲线。默认是 "ease"。

animation-delay 规定动画何时开始。默认是 0。

animation-iteration-count 规定动画被播放的次数。默认是 1。

animation-direction 规定动画是否在下一周期逆向地播放。默认是 "normal"。

animation-play-state 规定动画是否正在运行或暂停。默认是 "running"。

　　(4)、使用简写属性

　　下面的例子，使用了所有动画属性：

动画}

　　下面的代码，使用了简写的 animation 动画属性：

1 #move{ 2 animation:myflash 5s linear 2s infinite alternate; 3 }

 

11、CSS3 多列

　　通过 CSS3，可以创建多个列来对文本进行布局，就像报纸那样。

　　注意：目前只有 IE10+ 和 Opera 支持多列属性，IE9 不支持。

　　Chrome 和 Safari 需要添加前缀 -webkit-。

　　Firefox 需要添加前缀 -moz-。

　　(1)、创建多列

　　column-count 属性可用于规定元素应该被分隔的列数。

　　下面的例子，把 DIV 元素中的文本分隔为三列：