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中文网</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() 함수를 보여줍니다. 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>

위 코드는rotateY()의 기능을 보여줍니다. 제어 요소는 폴 댄서가 수직 기둥에서 회전하는 것처럼 y축을 중심으로 회전합니다.
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>

위 코드는 z축을 중심으로 요소의 회전을 제어할 수 있는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>

코드 재설정

자동운전

제출하다

시사 Clear