亚洲国内精品_97久久精品人人做人人爽_精品五月天堂_在线中文字幕视频观看

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);