CSS3 3D ??
? ??? ????? ?? 3?? ???? ?? ???????
X, Y, Z? ?? ???? ??? 3??? ????, ? ?? ?? ?? ?????.
3D ??
CSS3??? 3D ??? ???? ??? ??? ??? ? ????.
? ???? ??? ?? 3D ?? ?? ? ??? ??? ???.
rotateX()
rotateY()
???? ??
rotateX() ???
rotateX() ???? X?? ???? ??? ??? ???? ?????.
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>php中文網(wǎng)(php.cn)</title>
<style type="text/css">
#test{
height:200px;
width:200px;
position:absolute;
margin-top:100px;
margin-left:100px;
}
#test div{
height:200px;
width:200px;
background:lightblue;
-webkit-transition: all .6s;
}
#test div:hover{
-webkit-transform:rotateX(90deg);
}
</style>
<body>
<div id="test">
<div></div>
</div>
</body>
</html>rotateY() ???
rotateY() ???? Y?? ???? ??? ??? ???? ?????.
?????? ??
?? ??? ?? ?? ??? ?????? ????.
?? ?? CSS
transform ??? 2D ?? 3D ??? ?????. 3 ?
transform-origin? ???? ??? ??? ??? ????? ? ????. 3 ?
transform-style ??? ??? 3D ??? ???? ??? ?????. 3 ?
perspective 3D ??? ?? ??? ?????. 3 ?
perspective-origin 3D ??? ?? ??? ?????. 3 ?
backface-visibility ??? ??? ?? ? ??? ????? ??? ?????. 3
3D ?? ??
?? ??
matrix3d(n,n,n,n,n,n,n,n,n,n,n,n,n,n,n,n)? 16? ?? 4x4 ??? ???? 3D ??? ?????. .
translate3d(x,y,z)? 3D ??? ?????.
translateX(x) X?? ??? ?? ???? 3D ?? ??? ?????.
translateY(y) Y?? ???? ?? ???? 3D ??? ?????.
translateZ(z) Z?? ???? ?? ???? 3D ??? ?????.
scale3d(x,y,z)? 3D ???? ??? ?????.
scaleX(x) X? ?? ???? 3D ???? ??? ?????.
scaleY(y) Y? ?? ???? 3D ???? ??? ?????.
scaleZ(z) Z? ?? ???? 3D ???? ??? ?????.
rotate3d(x,y,z,angle) 3D ??? ?????.
rotateX(angle) X?? ?? 3D ??? ?????.
rotateY(angle) Y?? ?? 3D ??? ?????.
rotateZ(angle) Z?? ?? 3D ??? ?????.
perspective(n) 3D ?? ??? ???? ?????.
