CSS3 3D ??
3D ?? ??? ???? 2D ???? ??X, ??Y, ??Z?? ? ?? ??? ??? ? ????. ??()? 2D ????? ????? ?????. ??? ???? ??? ????.
1.rotateX() ???:
<!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;
font-size:12px;
transform-origin:0px 0px;
-ms-transform-origin:0px 0px;
-webkit-transform-origin:0px 0px;
-o-transform-origin:0px 0px;
-moztransform-origin:0px 0px;
transform:rotateX(0deg);
-ms-transform:rotateX(0deg);
-webkit-transform:rotateX(0deg);
-o-transform:rotateX(0deg);
-moz-transform:rotateX(0deg);
}
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="rotateX(" + value + "deg)";
oinner.style.msTransform="rotateX(" + value + "deg)";
oinner.style.webkitTransform="rotateX(" + value + "deg)";
oinner.style.MozTransform="rotateX(" + value + "deg)";
oinner.style.OTransform="rotateX(" + 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">旋轉(zhuǎn):</td>
<td><input type="range" min="-360" max="360" id="range" value="0"/></td>
</tr>
<tr>
<td class="left">rotateX:</td>
<td>(<span id="persp">0deg</span>)</td>
</tr>
</table>
</body>
</html>? ??? ??X() ??? ?????. x? ?? ?? ??? ?? ???? ??? ?????.
2.rotateY() ???:
<!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;
font-size:12px;
transform-origin:0px 0px;
-ms-transform-origin:0px 0px;
-webkit-transform-origin:0px 0px;
-o-transform-origin:0px 0px;
-moztransform-origin:0px 0px;
transform:rotateY(0deg);
-ms-transform:rotateX(0deg);
-webkit-transform:rotateY(0deg);
-o-transform:rotateY(0deg);
-moz-transform:rotateY(0deg);
}
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="rotateY(" + value + "deg)";
oinner.style.msTransform="rotateY(" + value + "deg)";
oinner.style.webkitTransform="rotateY(" + value + "deg)";
oinner.style.MozTransform="rotateY(" + value + "deg)";
oinner.style.OTransform="rotateY(" + 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">旋轉(zhuǎn):</td>
<td><input type="range" min="-360" max="360" id="range" value="0"/></td>
</tr>
<tr>
<td class="left">rotateY:</td>
<td>(<span id="persp">0deg</span>)</td>
</tr>
</table>
</body>
</html>? ???rotateY()? ??? ?????. ?? ??? ? ??? ?? ???? ???? ??? y?? ???? ?????.
Three.rotateZ() ???:
<!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;
font-size:12px;
transform-origin:0px 0px;
-ms-transform-origin:0px 0px;
-webkit-transform-origin:0px 0px;
-o-transform-origin:0px 0px;
-moztransform-origin:0px 0px;
transform:rotateZ(0deg);
-ms-transform:rotateZ(0deg);
-webkit-transform:rotateZ(0deg);
-o-transform:rotateZ(0deg);
-moz-transform:rotateZ(0deg);
}
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="rotateZ(" + value + "deg)";
oinner.style.msTransform="rotateZ(" + value + "deg)";
oinner.style.webkitTransform="rotateZ(" + value + "deg)";
oinner.style.MozTransform="rotateZ(" + value + "deg)";
oinner.style.OTransform="rotateZ(" + 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">旋轉(zhuǎn):</td>
<td><input type="range" min="-360" max="360" id="range" value="0"/></td>
</tr>
<tr>
<td class="left">rotateZ:</td>
<td>(<span id="persp">0deg</span>)</td>
</tr>
</table>
</body>
</html>? ??? z?? ???? ??? ??? ??? ? ??rotateZ()? ??? ?????. -?? ???? ?????? ??? ??? ????? ?????? ??? ? ?? ???. ?? ? ?? ??? ? ?? ?? ??? ??? ???? ?????.
