html 3d坐标,CSS3 03. 3D变换、坐标系、透视perspective、transformZ、transform-style添加3D效果、backface-visibility元素背面可见...

1、左手坐标系

伸出左手，让拇指和食指成“L”形，大拇指向右，食指向上，中指指向前方。这样我们就建立了一个左手坐标系，拇指、食指和中指分别代表X、Y、Z轴的正方向。如下图

CSS中的3D坐标系

CSS3中的3D坐标系与上述的3D坐标系是有一定区别的，相当于其绕着X轴旋转了180度，如下图

左手法则

左手握住旋转轴，竖起拇指指向旋转轴正方向，正向就是其余手指卷曲的方向。

透视 perspective

perspective：400px；

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

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

注：并非任何情况下需要透视效果，根据开发需要进行设置。

perspective有两种写法

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

b) 作为transform属性的一个值，做用于元素自身

transform：translateZ(50px)

沿Z轴移动，需要给父盒子添加透视 perspective：Number；

3D呈现 transform-style：3d

给父盒子添加，让子盒子存在真3d效果

指定子元素定位在3d空间中

flat：默认值，扁平化

backface-visibility：hidden；设置元素背面是否可见

伪元素获取自定义属性：  content：attr(自定义的属性名)

动画

1、必要元素：

b、通过百分比将动画序列分割成多个节点；

c、在各节点中分别定义各属性

d、通过animation将动画应用于相应元素；

2、关键属性

a、animation-name设置动画序列名称

b、animation-duration动画持续时间

c、animation-delay动画延时时间

d、animation-timing-function动画执行速度

linear：匀速／ease：减速／ease-in：加速／ease-out：减速／ease-in-out：先加速 后减速

e、animation-play-state动画播放状态，running、paused等

f、animation-direction动画逆播，alternate反向normal正常

g、animation-fill-mode动画执行完毕后状态，forwards保持结束后的状态、backwards等

h、animation-iteration-count动画执行次数，inifinate等

i、steps(60) 表示动画分成60步完成

若所有属性都需要过渡： transition-property: all;

参数值的顺序：

关于几个值，除了名字，动画时间，延时有严格顺序要求其它随意

案例：

多列布局

column-count ： number

number 是几 就分几列；

chrome不支持

column-rule: 1px dashed red ; 分割线

column-gap: 30px;列间间距

colume-width： 列宽度

column-span：all／none     用于

标签 ，标题跨列或不跨列

原文：http://www.cnblogs.com/mingm/p/6816171.html