CSS3的3D转换translate3d(x,y,z)函数_html/css_WEB-ITnose

CSS3的3D转换translate3d(x,y,z)函数:
translate3d(x,y,z)只是规定3D转换的一种形式，更多相关内容可以参阅CSS3的3D转换效果详解介绍一章节。
此函数用来规定指定元素在三维空间中的位移。
语法结构:

translate3d(x,y,z) 

参数解析:
1.x:表示在x轴方向的位移。
2.y:表示在y轴方向的位移。
3.z:表示在z轴方向的位移。
代码实例:
1.x轴方向的位移:

                蚂蚁部落    #box{  position:relative;  height:150px;  width:150px;  margin-left:450px;  margin-top:250px;  padding:10px;  border:1px solid black;}#inner{  width:100px;  height:100px;  text-align:center;  line-height:100px;  font-size:12px;  position:absolute;  border:1px solid black;  background-color:yellow;     transform:translate3d(0px,0,0);   -ms-transform:translate3d(0px,0,0);  -webkit-transform:translate3d(0px,0,0);  -o-transform:translate3d(0px,0,0);  -moz-transform:translate3d(0px,0,0);}table{     font-size:12px;     width:500px;     margin-left:220px;   text-align:left; }   .left{  text-align:right;  width:150px;}    function change(value){    var oinner=document.getElementById('inner');    var oshow=document.getElementById('show');       oinner.style.transform="translate3d("+value+"px,0,0)";   oinner.style.msTransform="translate3d("+value+"px,0,0)";   oinner.style.webkitTransform="translate3d("+value+"px,0,0)";   oinner.style.MozTransform="translate3d("+value+"px,0,0)";   oinner.style.OTransform="translate3d("+value+"px,0,0)";      oshow.innerHTML=value;  } window.onload=function(){   var range=document.getElementById("range");   range.onmousemove=function(){     change(this.value);   } }     
  
蚂蚁部落

      
查看更多关于CSS3的3D转换translate3d(x,y,z)函数_html/css_WEB-ITnose的详细内容...
        

          
声明：本文来自网络，不代表【好得很程序员自学网】立场，转载请注明出处：http://haodehen.cn/did113806