CSS3 3D 変換

3D 変換エフェクトをマスターするには、画期的な方法として、rotateX、rotateY、rotateZ を使用できます。2D 変換では、rotate() は回転を意味します。これは 2D 変換なので、平面上で回転するだけです。小分けの必要性。

1.rotateX() メソッド:

<!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>

上記のコードは、体操選手が水平バー上で回転するように、要素を x 軸を中心に回転させる関数を示しています。
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>

上記のコードは、垂直方向のポールダンサーのように、要素を Y 軸を中心に回転するように制御できます。位置をスチールパイプ上で回転させます。
3.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>

上記のコードは、Z軸を中心とした要素の回転を制御することができます。ジオメトリは比較的明確なはずです。Baidu で検索すればわかります。上記の 3 つのコードは、3 つの回転関数の効果を明確に示しています。

学び続ける

新しいファイル

<!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>

提出するリセットコード

自動運転