CSS3 3D Transformation
To master the 3D transformation effect, you can use three methods as a breakthrough, namely rotateX, rotateY, rotateZ; in 2D transformation, rotate() means rotation. Since it is a 2D transformation, it only rotates on a plane. , so no need to subdivide.
1.rotateX() method:
<!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>The above code demonstrates the function of rotateX(), which can control elements around the x-axis Perform a spin like a gymnast on a horizontal bar.
2.rotateY() method:
<!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>The above code demonstrates the function of rotateY(), he can The control element rotates around the y-axis, like a pole dancer spinning on a vertical pole.
3.rotateZ() method:
<!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>The above code demonstrates the function of rotateZ(), which can control the rotation of elements around the z-axis. Regarding the Z axis, those who have studied solid geometry should be relatively clear about it. You can know it by just searching on Baidu. The above three codes have clearly demonstrated the effects of the three rotation functions.
