css 2 D 3 D変換
1、
1、
、 、
CSS ， 2D 3D , ： ， ， ，
2D ： X Y
3D ： Z
2、
1、transform
： 2D 3D
： " "
none : ，
transform-function : ， ，
2、
：
：transform-origin
，
： / /
： x y
： x y z
3、2D
1、 2D
x y 2D
2D ：
2、2D -
1、
2、
：transform
：translate()
translate(x) : x
translate(x,y) ： x y
： 、
：
x
x
y
y
：
translateX(x): x -->translate(x)
translateY(y): y
3、2D -
1、
2、
：transform
：scale()
scale(x)
scale(x,y)
： ，
：
1
：0 1
： 1
：
scaleX(x) : ( )
scaleY(y) : ( )
4、2D -
1、
（ ）
2、
：transform
：rotate(ndeg)
n ：
n ：
5、2D -
1、
， x y
2、
：transform
：skew(x)
skew(x,y)
：
skewX(x) --> skew(x)
skewY(y)
4、3D
1、 3D
x y ， z ( )
2、perspective
：
1、 perspective 3d ， 3d
2、
Chrome Safari -webkit-perspective
3、3D -
1、 3d
2d ， z
2、
：transform
：
translateZ(z)
： ，
： ，
translate3d(x,y,z)
4、3D -
1、
：transform
：
1、rotatex(xdeg)
2、rotatey(ydeg)
3、rotatez(zdeg)
4、rotate3d(x,y,z,deg)
rotate3d(1,1,1,45deg);
-->rotatex(45deg) rotatey(45deg) rotatez(45deg)
rotate3d(1,0,0,45deg) -->
rotatex(45deg)
5、transform-style
： 3D ，
：
flat ： 3d ， 2d
preserve-3d ： 3d