1.变形-参考位置

        transform-origin 属性允许改变被转换元素的参考位置

        transform-origin: x  y  z ; 改变旋转参考点  给子元素自身加

        例1：transform-origin:50px  50px;     

        例2：transform-origin:left  top;

2.变形-移动  transform:translate();

        2D移动:translate(x,y);

        3D移动: translateX(length) 定义对象X轴的平移

        translateY(length) 定义对象Y轴的平移

        translateZ(length) 定义对象3D 移动Z轴的平移

        translate3d(x,y,z) 定义 3D 移动

        例：-webkit-transform:translate(50px,50px);  2D

               -webkit-transform: translate3d(50px,50px,50px);  3D

3.变形-缩放

        transform:scale(); 变形-缩放

        1>transform:rotate();

            2D旋转：rotate(angle) 在参数中规定角度。

            例：-webkit-transform:rotate(30deg);

            3D旋转：rotateX(angle)沿着 X 轴的 3D旋转。

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

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

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

            例1：-webkit-transform:rotate3d(1,1,1,360deg);

            例2：-webkit-transform:rotateX(360deg) rotateY(360deg)  rotateZ(360deg);

CSS3倒影和变形 CSS3倒影 CSS3变形 石家庄建网站 石家庄做网站