css3—实现3D特效

rotate实例

translate实例

正方体实例



实现3d效果,我们理所应当的在三维的坐标下实现。

1.perspective属性：透视， 没有透视 哪里来的3dm呢.当为元素定义 perspective 属性时，其子元素会获得透视效果，而不是元素本身。

2.perspective-origin：定义我们看向屏幕的视点

perspective-origin: x-axis y-axis;

x-axis定义该视图在 x 轴上的位置。默认值：50%。

y-axis定义该视图在 y 轴上的位置。默认值：50%。

3.transform-style: preserve-3d

transform-style属性也是3D效果中经常使用的，其两个参数，flat|preserve-3d. 前者flat为默认值，表示平面的；后者preserve-3d表示3D透视



4.通过transition / transform 来体现3d效果

Transitions

具体属性：

transition-property：用于指定过渡的性质，比如 transition-property:backgrond 就是指 backgound 参与这个过渡

transition-duration：用于指定这个过渡的持续时间

transition-delay：用于制定延迟过渡的时间

transition-timing-function：用于指定过渡类型，有 ease | linear | ease-in | ease-out | ease-in-out | cubic-bezier

Transform

再来看看 Transform，其实就是指拉伸，压缩，旋转，偏移等等一些图形学里面的基本变换。

首先我们要知道transform-origin属性

这里用rotate属性来说明：如下绕红点旋转





rotate：指定对象的2D rotateing（2D旋转），第一个参数对应X轴，第二的参数对应Y轴，如果第二个参数未提供，则默认为0.

.rotate {
-webkit-transform: rotate(30deg);
}

skew：指定对象skew transforma（斜切扭曲）

第一个参数对应X轴，第二的参数对应Y轴，如果第二个参数未提供，则默认为0.

.skew {
-webkit-transform: skew(50deg); //chrome为例
}

scale：指定对象的2D scale（2D缩放），第一个参数对应X轴，第二的参数对应Y轴，如果第二个参数未提供，则默认取第一个参数的值.

.scale {
-webkit-transform: scale(0.5, 0.5);
}

translate：指定对象的2Dtranslate（2D平移），第一个参数对应X轴，第二的参数对应Y轴，如果第二个参数未提供，则默认为0.

.translate {
-webkit-transform: translate(50px, 50px);
}