##transform(变形)、闹钟实例、3D

国外测试网站：http://codepen.io/；

transform(变形)

CSS3中可以通过transform属性修改元素的变形、旋转、缩放、倾斜特性，在CSS3中transform主要包括以下几种：旋转rotate、倾斜skew、缩放scale和移动translate以及矩阵变形matrix
transform-origin的取值可以是top, bottom, left, right, center, 或百分比，或长度值

参数：
rotate(旋转)

可以通过rotate使元素旋转一定的度数

transform:rotate(30deg);
顺时针旋转一定角度，　单位是角度deg（degree）
旋转之后元素仍占据原来位置，实际上所有的transform都是这样，缩放、位移等都不会改变元素占据的位置
元素旋转的的基点默认是中心(坐标轴原点)，可以通过transform-origin属性改变
transform:rotate(30deg); 
transform-origin: 0% 0%;
transform-origin的取值可以是top, bottom, left, right, center, 或百分比，或长度值

transform-origin属性对下面介绍的transform都有作用

translate(位移)

可以通过translate使元素平移

transform:translate(x,y);
例子

transform:translate(200px,150px);
也可以简单只移动一个坐标

transform:translateX(100px);
transform:translateY(100px);

scale(缩放)

可以通过scale使元素缩放一定的比例，和translate类似，也有三个方法

scale(x,y) /*使元素水平方向和垂直方向同时缩放*/
scaleX(x) /*元素仅水平方向缩放*/
scaleY(y) /*元素仅垂直方向缩放*/
transform:scale(2, 0.5);
transform:scaleY(0.3);
transform:scaleY(2);
transform:scale(3);

skew(倾斜)

可以通过skew使元素扭曲一定的度数，和上面一样也有三中类似的用法

transform:skew(10deg, 20deg);
transform:skewX(10deg);
transform:skewY(10deg);
transform:skew(10deg);

transform应用，时钟完整代码

transform 3D 效果

相关函数

旋转 rotateX() rotatY() rotateZ()
位移 translateZ()
缩放 scaleZ()

perspective

在父级设置睛生perspective:500px;
perspective属性的值决定了3D效果的强烈程度，可以认为是观察者到页面的距离。值越大距离越远，视觉上的3D效果就会相应的减弱。perspective: 2000px; 会产生一个好像我们使用望远镜看远方物体的3D效果，perspective: 100px;会产生一个小昆虫看大象的效果。

perspective-origin //设置消失的位置
在父级设置perspective-origin: 0 0;
定义了消失点的位置,如当你沿着铁路线去看两条铁轨，沿着公路线去看两边排列整齐的树木时，两条平行的铁轨或两排树木连线交与很远很远的某一点，这点在透视图中叫做消失点。

backface-visibility
子元素上设置backface-visibility:hidden;

backface-visibility属性指定当元素背面朝向观察者时是否可见。元素的背面总是透明的，当其朝向观察者时，显示正面的镜像。

在某些情况下，我们不希望元素内容在背面可见，比如实现翻牌效果。
transform-style
在父级设置transform-style: preserve-3d;
transform-style属性指定了，该元素的子元素是（看起来）位于三维空间内，还是在该元素所在的平面内被扁平化。

如果被扁平化，则子元素不会独立的存在于三维空间。

在元素本身设置旋转的中心点transform-origin: center center 100px;

正方体

    
    
    


    

        
1
        
2
        
3
        
4
        
5
        
6