Transformasi 3D CSS3
Untuk menguasai kesan transformasi 3D, anda boleh menggunakan tiga kaedah sebagai terobosan, iaitu rotateX, rotateY, rotateZ dalam transformasi 2D, rotate() bermaksud rotasi Memandangkan ia adalah transformasi 2D, ia hanya berputar pada satah. , jadi tidak perlu membahagikan.
1.rotateX() kaedah:
<!DOCTYPE html>
<html>
<head>
<meta charset=" utf-8">
<meta name="author" content="http://ask.php.cn/" />
<title>php中文网</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中文网</div>
</div>
<table>
<tr>
<td class="left">旋转:</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>Kod di atas menunjukkan fungsi rotateX(), yang boleh mengawal elemen di sekeliling paksi-x Lakukan putaran seperti gimnas pada palang melintang.
kaedah 2.rotateY():
<!DOCTYPE html>
<html>
<head>
<meta charset=" utf-8">
<meta name="author" content="http://ask.php.cn/" />
<title>php中文网</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中文网</div>
</div>
<table>
<tr>
<td class="left">旋转:</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>Kod di atas menunjukkan fungsi rotateY(), dia boleh Elemen kawalan berputar mengelilingi paksi-y, seperti penari tiang berputar pada tiang menegak.
Kaedah three.rotateZ():
<!DOCTYPE html>
<html>
<head>
<meta charset=" utf-8">
<meta name="author" content="http://ask.php.cn/" />
<title>php中文网</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中文网</div>
</div>
<table>
<tr>
<td class="left">旋转:</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>Kod di atas menunjukkan fungsi rotateZ(), yang boleh mengawal putaran elemen di sekeliling z -Berhubung paksi-Z, mereka yang telah mempelajari geometri pepejal harus jelas tentangnya. Anda boleh mencari di Baidu untuk mengetahuinya. Tiga kod di atas telah menunjukkan dengan jelas kesan daripada tiga fungsi putaran.
![Projek hadapan-Shangyou [amalan komprehensif teknologi HTML/CSS/JS]](https://img.php.cn/upload/course/000/000/068/63bfcb2974f91471.jpg)
![Kursus front-end berasaskan sifar [pembelajaran lanjutan Vue dan aplikasi praktikal]](https://img.php.cn/upload/course/000/000/068/63bbd15353895588.jpg)
![Tutorial bahagian hadapan WEB [HTML5+CSS3+JS]](https://img.php.cn/upload/course/000/000/068/63ba60c8da520536.jpg)
![Aplikasi praktikal Apipost [api, antara muka, ujian automatik, olok-olok]](https://img.php.cn/upload/course/000/000/068/63b3c967a20f4861.jpg)
