CSS3 3D ??
3D ??
CSS3? ???? 3D ??? ???? ??? ??? ??? ? ????.
? ???? ?? 3D ?? ?? ? ??? ??? ???:
rotateX() ??
rotateX( ) ??, X?? ?? ???? ???? ?????.
?
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>php中文網(wǎng)(php.cn)</title>
<style>
div
{
width:100px;
height:75px;
background-color: #f4ff99;
border:1px solid black;
}
div#div2
{
transform:rotateX(120deg);
-webkit-transform:rotateX(120deg); /* Safari and Chrome */
}
</style>
</head>
<body>
<div>PHP.CN</div>
<div id="div2">HELLO</div>
</body>
</html>
????? ???? ??? ???
rotateY() ???
rotateY() ???? Y?? ???? ??? ??? ??? ?????.
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>php中文網(wǎng)(php.cn)</title>
<style>
div
{
width:100px;
height:75px;
background-color:red;
border:1px solid black;
}
div#div2
{
transform:rotateY(130deg);
-webkit-transform:rotateY(130deg); /* Safari and Chrome */
}
</style>
</head>
<body>
<div>Hello</div>
<div id="div2">Hello.</div>
</body>
</html>
????? ???? ??? ???
?? ??
?? ??? ?? ?? ??? ?????? ????.
????
??? 2D ?? 3D ??? ?????. 3 | | transform-origin |
? ???? ??? ??? ??? ????? ? ????. 3 | | transform-style |
? ??? ??? 3D ??? ???? ??? ?????. 3 | | perspective |
3D ??? ?? ??? ?????. 3 | | perspective-origin |
3D ??? ?? ??? ?????. 3 | | backface-visibility |
??? ??? ?? ? ??? ????? ??? ?????. 3 | |
3D ?? ?? Function | Description |
---|
matrix3d(n,n , n,n,n, 3D ?? ??, 16? ?? 4x4 ??? ?????. 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 ?? ??? ???? ?????. | | |
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>php中文網(wǎng)(php.cn)</title>
<style>
div
{
width:100px;
height:75px;
background-color: #f4ff99;
border:1px solid black;
}
div#div2
{
transform:rotateX(120deg);
-webkit-transform:rotateX(120deg); /* Safari and Chrome */
}
</style>
</head>
<body>
<div>PHP.CN</div>
<div id="div2">HELLO</div>
</body>
</html>
?? ????? ????? ? ????. ?? ???? ???? ????. ???? ? ??? ?? ?? ??????~
? ??? ??? ???? ???? ????.
|
|