CSS3 2D ??
CSS3 2D ??
CSS3 ??
CSS3 ????? ??? ??, ?? ??, ??, ?? ? ?? ? ????.
??? ??????
?? ??? ???? ??? ??, ?? ? ??? ??? ? ????.
??? 2D ?? 3D ??? ??? ? ????.
2D Conversion
? ???? 2D ?? ??? ?? ????.
- ????()
- Instance
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>php中文網(wǎng)(php.cn)</title> <style> div { width:200px; height:100px; background-color: #aeffb1; /* Rotate div */ transform:rotate(30deg); -ms-transform:rotate(30deg); /* IE 9 */ -webkit-transform:rotate(30deg); /* Safari and Chrome */ } </style> </head> <body> <div>Hello</div> </body> </html>????? ???? ??? ???translate() ???
Example
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>php中文網(wǎng)(php.cn)</title>
<style>
div
{
width:100px;
height:75px;
background-color: #9dfff2;
border:1px solid #e81d26;
}
div#div2
{
transform:translate(50px,100px);
-ms-transform:translate(50px,100px); /* IE 9 */
-webkit-transform:translate(50px,100px); /* Safari and Chrome */
}
</style>
</head>
<body>
<div>這是一個(gè)div元素</div>
<div id="div2">Hello. 這也是一個(gè)div元素</div>
</body>
</html>????? ???? ??? ???Tips
: ?? ?(50px, 100px)? ?? ???? 50??, ???? 100?? ?????. rotate() ??? rotate() ???? ??? ??? ???? ?? ???? ?????. ??? ?? ?? ???? ???? ?? ?? ?????. Tips: ?? ?(30?) ??? ?? ???? 30? ?????. ????? ???? scale() ??? scale() ???? ??? ???. ??? ??? ??(X?)? ??(Y?)? ?? ????? ?????. ) ????: Tip: scale(2,4)? ??? ?? ??? 2??, ??? ?? ??? 4?? ?????. ????? ???? skew() ??? skew() ???? ??? ???. ??? ??(X?) ? ??(Y?) ? ????? ???? ??? ?????. : ? Tips: ??(30deg,20deg)? X?? Y?? ???? 20?, 30?? ?????. ????? ???? ??? ??? matrix() ??? matrix() ???? 2D ?? ???? ??? ???????. matrix ???? ??, ?? ??, ??(??) ? ??? ??? ??? 6?? ????? ????. ? matrix() ???? ???? div ??? 30° ?????. ????? ???? ??? ??? ? ?? ?? ?? ?? ??? ??? ????. 2D ?? ??<!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:rotate(30deg);
-ms-transform:rotate(30deg); /* IE 9 */
-webkit-transform:rotate(30deg); /* Safari and Chrome */
}
</style>
</head>
<body>
<div>你好。這是一個(gè) DIV 元素。</div>
<div id="div2">你好。這是一個(gè) DIV 元素。</div>
</body>
</html><!DOCTYPE html>
<html>
<head>
<style>
div
{
width:100px;
height:75px;
background-color:red;
border:1px solid black;
}
div#div2
{
margin:100px;
transform:scale(2,4);
-ms-transform:scale(2,4); /* IE 9 */
-webkit-transform:scale(2,4); /* Safari and Chrome */
}
</style>
</head>
<body>
<div>Hello. This is a DIV element.</div>
<div id="div2">Hello. This is a DIV element.</div>
</body>
</html> <!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:skew(30deg,20deg);
-ms-transform:skew(30deg,20deg); /* IE 9 */
-webkit-transform:skew(30deg,20deg); /* Safari and Chrome */
}
</style>
</head>
<body>
<div>Hello. This is a DIV element.</div>
<div id="div2">Hello. This is a DIV element.</div>
</body>
</html><!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:matrix(0.866,0.5,-0.5,0.866,0,0);
-ms-transform:matrix(0.866,0.5,-0.5,0.866,0,0); /* IE 9 */
-webkit-transform:matrix(0.866,0.5,-0.5,0.866,0,0); /* Safari and Chrome */
}
</style>
</head>
<body>
<div>Hello. This is a DIV element.</div>
<div id="div2">Hello. This is a DIV element.</div>
</body>
</html>Property Description CSS transform 2D ??? ?????. ?? 3D ?? 3 transform-origin ?? ?? ??? ??? ? ???? 3 ?? Description ????( n,n,n,n,n,n) ? 6? ?? ??? ???? 2D ??? ?????. translate(x,y) ? X ? Y?? ?? ??? ???? 2D ??? ?????. translateX(n) ? X?? ?? ??? ???? 2D ??? ?????. translateY(n) ? Y?? ?? ??? ???? 2D ??? ?????. scale(x,y) ? ??? ??? ??? ???? 2D ?? ?? ??? ?????. scaleX(n) ? ??? ??? ???? 2D ?? ?? ??? ?????. scaleY(n) ? ??? ??? ???? 2D ?? ?? ??? ?????. rotate(angle) ? ????? ??? ???? 2D ??? ?????. skew(x-angle,y-angle) ? X ? Y?? ?? 2D ???? ??? ?????. skewX(angle) ? X?? ?? 2D ???? ??? ?????. skewY(angle) ? Y?? ?? 2D ???? ??? ?????.
