CSS3的3D转换效果详解介绍(1/2)

来源：网络整理时间:2015-11-05 关键词:

本篇文章主要介绍了"CSS3的3D转换效果详解介绍"，主要涉及到方面的内容，对于HTMLjrs看球网直播吧_低调看直播体育app软件下载_低调看体育直播感兴趣的同学可以参考一下： CSS3的3D转换效果详解介绍:本章介绍一下CSS3的3D转换效果，此效果的实现依靠的是transform属性，3D转换只是此属性的部分应用，更多相关内容可以参...

CSS3的3D转换效果详解介绍:
本章介绍一下CSS3的3D转换效果，此效果的实现依靠的是transform属性，3D转换只是此属性的部分应用，更多相关内容可以参阅CSS3的transform属性总略介绍一章节。
掌握3D转换效果，可以从三个方法作为突破口，分别是rotateX, rotateY, rotateZ，在2D变换过程中rotate()函数的应用，它表示旋转的意思，由于是2D变换，所以它只是在一个平面进行旋转，所以无需细分，具体可以参阅CSS3的2D转换效果详细介绍一章节。下面分别介绍一下上面的三个旋转方法。
一.rotateX()方法:

DOCTYPE html><html><head><meta charset=" utf-8"><meta name="author" content="http://www.softwhy.com/"/><title>蚂蚁部落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">蚂蚁部落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">0degspan>)td>tr>table>body>html>

以上代码演示了rotateX()的作用，他可以控制元素围绕着x轴进行旋转，就像是一个体操运动员，在单杠上旋转一样。
二.rotateY()方法:

DOCTYPE html><html><head><meta charset=" utf-8"><meta name="author" content="http://www.softwhy.com/"/><title>蚂蚁部落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">蚂蚁部落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">0degspan>)td>tr>table>body>html>

以上代码演示了rotateY()的作用，他可以控制元素围绕着y轴进行旋转，就像是一个钢管舞演员在竖直的钢管上旋转。
三.rotateZ()方法:

DOCTYPE html><html><head><meta charset=" utf-8"><meta name="author" content="http://www.softwhy.com/"/><title>蚂蚁部落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">蚂蚁部落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">0degspan>)td>tr>table>body>html>

1 2 下一页

上一篇：你画我猜---websocket 下一篇：CSS的函数取值attr

CSS3的3D转换效果详解介绍(1/2)

相关图片

相关文章