HTML5高级工程师之 CSS3 3D转换

后盾网 人人做后盾

www.houdunwang.com

CCS3

后盾网 2011-2016

通过 CSS3 3D 转换，能够使我们对元素在2d空间内模拟3D运动， 如：元素绕着Y轴和X轴旋转，沿着Z轴进行移动、缩放、拉长或拉 伸等等。

Internet Explorer 10 和 Firefox 支持 3D 转换。 Chrome 和 Safari 需要前缀 -webkit-。

Opera 仍然不支持 3D 转换（它只支持 2D 转换）。

3D 转换

后盾网 人人做后盾

属性 transform transform-origin 描述 向元素应用 2D 或 3D 转换函数。 允许你改变被转换元素的位置。 规定被嵌套元素如何在 3D 空间中显示。 flat子元素将不保留其 3D 位置。 preserve-3d 子元素将保留其 3D 位置 规定 3D 元素的透视效果，景深 CSS 3 3 transform-style 3 perspective perspective-origin 3 3 规定 3D 元素的底部位置。 定义元素在不面对屏幕时是否可见。 visible 背面可见 hidden 背面不可见 backface-visibility 3

属性

后盾网 人人做后盾

函数 描述 定义 3D 转化。 定义 3D 转化，仅使用用于 X 轴的值。 定义 3D 转化，仅使用用于 Y 轴的值。 定义 3D 转化，仅使用用于 Z 轴的值。 定义 3D 缩放转换。 定义 3D 缩放转换，通过给定一个 X 轴的值。 定义 3D 缩放转换，通过给定一个 Y 轴的值。 定义 3D 缩放转换，通过给定一个 Z 轴的值。 定义 3D 旋转。 定义沿 X 轴的 3D 旋转。 定义沿 Y 轴的 3D 旋转。 定义沿 Z 轴的 3D 旋转。 translate3d(x,y,z) translateX(x) translateY(y) translateZ(z) scale3d(x,y,z) scaleX(x) scaleY(y) scaleZ(z) rotate3d(x,y,z,angle) rotateX(angle) rotateY(angle) rotateZ(angle)

后盾网 人人做后盾

后盾网函数

人人做后盾

jquery的animate能实现非常强大的自定义动画效果，CSS3中也 为我们定义了一个能实现类似的功能的属性

transition: 属性名称 时间 过渡效果 延时;

css3过渡属性

后盾网 人人做后盾

值 linear ease ease-in ease-out ease-in-out cubic- bezier(n,n,n, n)

描述 规定以相同速度开始至结束的过渡效果（等于 cubic- bezier(0,0,1,1)）。 规定慢速开始，然后变快，然后慢速结束的过渡效果（cubic- bezier(0.25,0.1,0.25,1)）。 规定以慢速开始的过渡效果（等于 cubic-bezier(0.42,0,1,1)）。 规定以慢速结束的过渡效果（等于 cubic-bezier(0,0,0.58,1)）。 规定以慢速开始和结束的过渡效果（等于 cubic- bezier(0.42,0,0.58,1)）。 在 cubic-bezier 函数中定义自己的值。可能的值是 0 至 1 之间 的数值。

css3过渡效果函数

后盾网 人人做后盾