CSS3 ?? ??
1. ?? ??:
2D ??? ??? ??? ??, ?? ? ?? ??? ??? ? ????.
2D ??? ????? ?? ??? ???? ???. ?? ?? ??? ???? ????.
2. ?? ??:
1. ??() ??:
? ??? ??? ???? ? ? ????. ????? ??? ??? ?? ??? ?????.
?? ? ?? ????? ???, ? ?? ????? ?? ??? ?? ??? ????, ? ?? ????? ?? ??? ?? ??? ?????.
?? ?:
<!DOCTYPE html>
<html>
<head>
<meta charset=" utf-8">
<meta name="author" content="http:/
/" />
<title>php中文網(wǎng)</title>
<style type="text/css">
#box{
width:400px;
height:400px;
background:green;
}
#box .demo{
width:50px;
height:50px;
background:red;
transform:translate(50px,50px);
-ms-transform:translate(50px,50px);/*IE9 */
-webkit-transform:translate(50px,50px);/*Safari and Chrome*/
-o-transform:translate(50px,50px);/* Opera*/
-moz-transform:translate(50px,50px);/* Firefox */
}
</style>
</head>
<body>
<div id="box">
<div class="demo"></div>
</div>
</body>
</html>? ??? div? ??? ?? ? ?? ?? ?? 50px? ??? ? ????.
?? ?? ??: ????? ??? ?? ?? ? ????? ?? ? ?? ?? ??? ?????. ????? ??? ?? ?? ?? ??? ?? ??? ?? ?? ? ?? ??? ???? ?????. ?? ???.
2.rotate() ??:
? ??? ??? ?? ?? ?? ??? ??? ? ????. ?? ??? ??? ?? ?????.
?? ?:
<!DOCTYPE html>
<html>
<head>
<meta charset=" utf-8">
<meta name="author" content="http://ask.php.cn/" />
<title>php中文網(wǎng)</title>
<style type="text/css">
#box{
width:400px;
height:400px;
background:green;
}
#box .demo{
width:50px;
height:50px;
background:red;
transform:rotate(60deg);
-ms-transform:rotate(60deg);/* IE 9 */
-webkit-transform:rotate(60deg);/* Safari and Chrome */
-o-transform:rotate(60deg);/* Opera */
-moz-transform:rotate(60deg);
}
</style>
</head>
<body>
<div id="box">
<div class="demo"></div>
</div>
</body>
</html>? ??? div ??? ?? ???? 60? ??? ? ????.
3.scale() ??:
? ??? ??? ??? ?? ?? ??? ?? ? ????.
?? ? ?? ????? ????. ? ?? ????? ?? ?? ???? ? ?? ????? ?? ?? ?????.
?? ?:
<!DOCTYPE html>
<html>
<head>
<meta charset=" utf-8">
<meta name="author" content="http://ask.php.cn/" />
<title>php中文網(wǎng)</title>
<style type="text/css">
#box{
width:400px;
height:400px;
background:green;
margin:100px;
}
#box .demo{
width:50px;
height:50px;
background:red;
transform:scale(2,3);
-ms-transform:scale(2,3);/* IE 9 */
-webkit-transform:scale(2,3);/* Safari 和 Chrome */
-o-transform:scale(2,3);/* Opera */
-moz-transform:scale(2,3);/* Firefox */
}
</style>
</head>
<body>
<div id="box">
<div class="demo"></div>
</div>
</body>
</html>? ??? div? ??? ? ?, ??? ? ?? ?? ? ????.
4.skew() ??:
? ??? ??? ??? ?? ??? ??? ? ????.
?? ? ?? ????? ???, ? ?? ????? ?? ??? ??? ????, ? ?? ????? ?? ??? ??? ?????.
? ?? ????? ??? ?? ???? 0???.
?? ? 1:
<!DOCTYPE html>
<html>
<head>
<meta charset=" utf-8">
<meta name="author" content="http://ask.php.cn/" />
<title>php中文網(wǎng)</title>
<style type="text/css">
#box{
position:relative;
height:200px;
width:200px;
margin-top:150px;
margin-left:150px;
border:1px solid black;
}
#inner{
padding:50px;
position:absolute;
border:1px solid black;
background-color:yellow;
transform-origin:40 40;
font-size:12px;
transform:skew(45deg);
-ms-transform:skew(45deg);/*IE9*/
-webkit-transform:skew(45deg);/*Safari and Chrome*/
-o-transform:skew(45deg);/*Opera*/
-moz-transform:skew(45deg);/*Firefox*/
}
table{
font-size:12px;
width:300px;
margin-left:120px;
}
.left{text-align:right}
</style>
<script type="text/javascript">
function changeRot(value){
var oinner=document.getElementById('inner');
var opersp=document.getElementById('persp');
oinner.style.transform="skew(" + value + "deg)";
oinner.style.msTransform="skew(" + value + "deg)";
oinner.style.webkitTransform="skew(" + value + "deg)";
oinner.style.MozTransform="skew(" + value + "deg)";
oinner.style.OTransform="skew(" + value + "deg)";
opersp.innerHTML=value + "deg";
}
window.onload=function(){
var range=document.getElementById("range");
range.onmousemove=function(){
changeRot(this.value);
}
}
</script>
</head>
<body>
<div id="box">
<div id="inner">php中文網(wǎng)</div>
</div>
<table>
<tr>
<td class="left">扭曲:</td>
<td><input type="range" min="-360" max="360" id="range" value="45"/></td>
</tr>
<tr>
<td class="left">skew:</td>
<td>(<span id="persp">45deg</span>)</td>
</tr>
</table>
</body>
</html>? ??? ?? ??? ????? ?? ??? ??? ????? ? ?? ???? ? ? ????.
?? ?? 2:
<!DOCTYPE html>
<html>
<head>
<meta charset=" utf-8">
<meta name="author" content="http://ask.php.cn/" />
<title>php中文網(wǎng)</title>
<style type="text/css">
#box{
position:relative;
height:200px;
width:200px;
margin-top:150px;
margin-left:150px;
border:1px solid black;
}
#inner{
padding:50px;
position:absolute;
border:1px solid black;
background-color:yellow;
transform-origin:40 40;
font-size:12px;
transform:skew(0,45deg);
-ms-transform:skew(0,45deg);/*IE9*/
-webkit-transform:skew(0,45deg);/*Safari and Chrome*/
-o-transform:skew(0,45deg);/*Opera*/
-moz-transform:skew(0,45deg);/*Firefox*/
}
table{
font-size:12px;
width:300px;
margin-left:120px;
}
.left{text-align:right}
</style>
<script type="text/javascript">
function changeRot(value){
var oinner=document.getElementById('inner');
var opersp=document.getElementById('persp');
oinner.style.transform="skew(0," + value + "deg)";
oinner.style.msTransform="skew(0," + value + "deg)";
oinner.style.webkitTransform="skew(0," + value + "deg)";
oinner.style.MozTransform="skew(0," + value + "deg)";
oinner.style.OTransform="skew(0," + value + "deg)";
opersp.innerHTML=value + "deg";
}
window.onload=function(){
var range=document.getElementById("range");
range.onmousemove=function(){
changeRot(this.value);
}
}
</script>
</head>
<body>
<div id="box">
<div id="inner">php中文網(wǎng)</div>
</div>
<table>
<tr>
<td class="left">扭曲:</td>
<td><input type="range" min="-360" max="360" id="range" value="45"/></td>
</tr>
<tr>
<td class="left">skew:</td>
<td>(<span id="persp">45deg</span>)</td>
</tr>
</table>
</body>
</html>? ??? ?? ??? ??? ???? ? ??? ????? ???? ???? ?? ??? ? ? ????.
5.matrix() ??:
6? ?(a, b, c, d, e, f) ???? ?? ??? ?????. 2D ??? [a b c d e f] ?? ??? ?? ???? ?? ?????.
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>php中文網(wǎng)</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>matrix() ???? ???? div ??? 30° ?????
