传智博客
快捷导航
蚂蚁部落
查看: 11754|回复: 7

CSS3 translate3d(x,y,z)

[复制链接]
发表于 2014-4-16 12:49:59 | 显示全部楼层 |阅读模式
本帖最后由 antzone 于 2017-9-15 17:10 编辑

CSS3的3D转换translate3d(x,y,z)函数:
translate3d(x,y,z)只是规定3D转换的一种形式,更多相关内容可以参阅
CSS3 2D/3D转换一章节。
此函数用来规定指定元素在三维空间中的位移。
语法结构:
[CSS] 纯文本查看 复制代码
translate3d(x,y,z)

参数解析:
1.x:表示在x轴方向的位移。
2.y:表示在y轴方向的位移。
3.z:表示在z轴方向的位移。
代码实例:
1.x轴方向的位移:
[HTML] 纯文本查看 复制代码运行代码
<!DOCTYPE html>  
<html>  
<head>  
<meta charset=" utf-8">  
<meta name="author" content="http://www.softwhy.com/" />  
<title>蚂蚁部落</title>  
<style>
#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;
}
</style>
<script type="text/javascript">  
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);
  }
}
</script>
</head>
<body>
<div id="box">
  <div id="inner">蚂蚁部落</div>
</div>
<table>  
  <tr>  
    <td class="left">x轴位移:</td>  
    <td><input type="range" min="-200" step="1" max="200" id="range" value="0"/></td>  
  </tr>  
  <tr>  
    <td class="left">x:</td>  
    <td>(<span id="show">0</span>)</td>  
  </tr>  
</table>  
</body>  
</html>

拖动按钮可以实现x轴方向位移的演示,一切都很清楚。
2.y轴方向的位移:
[HTML] 纯文本查看 复制代码运行代码
<!DOCTYPE html>  
<html>  
<head>  
<meta charset=" utf-8">  
<meta name="author" content="http://www.softwhy.com/" />  
<title>蚂蚁部落</title>  
<style>
#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(0,0px,0);
  -ms-transform:translate3d(0,0px,0);
  -webkit-transform:translate3d(0,0px,0);
  -o-transform:translate3d(0,0px,0);
  -moz-transform:translate3d(0,0px,0);
}
table{   
  font-size:12px;   
  width:500px;   
  margin-left:220px;
  text-align:left;
}   
.left{
  text-align:right;
  width:150px;
}
</style>
<script type="text/javascript">  
function change(value){  
  var oinner=document.getElementById('inner');  
  var oshow=document.getElementById('show');  
  
  oinner.style.transform="translate3d(0,"+value+"px,0)";
  oinner.style.msTransform="translate3d(0,"+value+"px,0)";
  oinner.style.webkitTransform="translate3d(0,"+value+"px,0)";
  oinner.style.MozTransform="translate3d(0,"+value+"px,0)";
  oinner.style.OTransform="translate3d(0,"+value+"px,0)";
  
  oshow.innerHTML=value;  
}
window.onload=function(){
  var range=document.getElementById("range");
  range.onmousemove=function(){
    change(this.value);
  }
}
</script>
</head>
<body>
<div id="box">
  <div id="inner">蚂蚁部落</div>
</div>
<table>  
  <tr>  
    <td class="left">y轴位移:</td>  
    <td><input type="range" min="-200" step="1" max="200" id="range" value="0"/></td>  
  </tr>  
  <tr>  
    <td class="left">y:</td>  
    <td>(<span id="show">0</span>)</td>  
  </tr>  
</table>  
</body>  
</html>

拖动按钮可以实现Y轴方向位移的演示,一切都很清楚。
3.z轴方向位移:
[HTML] 纯文本查看 复制代码运行代码
<!DOCTYPE html>  
<html>  
<head>  
<meta charset=" utf-8">  
<meta name="author" content="http://www.softwhy.com/" />  
<title>蚂蚁部落</title>  
<style>
#box{
  position:relative;
  height:150px;
  width:150px;
  margin-left:450px;
  margin-top:250px;
  padding:10px;
  border:1px solid black;
  
  -webkit-perspective:1200px;
  -moz-perspective:1200px;
  -ms-perspective:1200px;
  -o-perspective:1200px;
  perspective:1200px;
}
#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(0,0,0);
  -ms-transform:translate3d(0,0,0);
  -webkit-transform:translate3d(0,0,0);
  -o-transform:translate3d(0,0,0);
  -moz-transform:translate3d(0,0,0);
}
table{   
  font-size:12px;   
  width:500px;   
  margin-left:220px;
  text-align:left;
}   
.left{
  text-align:right;
  width:150px;
}
</style>
<script type="text/javascript">  
function change(value){  
  var oinner=document.getElementById('inner');  
  var oshow=document.getElementById('show');  
  
  oinner.style.transform="translate3d(0,0,"+value+"px)";
  oinner.style.msTransform="translate3d(0,0,"+value+"px)";
  oinner.style.webkitTransform="translate3d(0,0,"+value+"px)";
  oinner.style.MozTransform="translate3d(0,0,"+value+"px)";
  oinner.style.OTransform="translate3d(0,0,"+value+"px)";
  
  oshow.innerHTML=value;  
}
window.onload=function(){
  var range=document.getElementById("range");
  range.onmousemove=function(){
    change(this.value);
  }
}
</script>
</head>
<body>
<div id="box">
  <div id="inner">蚂蚁部落</div>
</div>
<table>  
  <tr>  
    <td class="left">z轴位移:</td>  
    <td><input type="range" min="-200" step="1" max="200" id="range" value="0"/></td>  
  </tr>  
  <tr>  
    <td class="left">z:</td>  
    <td>(<span id="show">0</span>)</td>  
  </tr>  
</table>  
</body>  
</html>

以上代码演示了我们的效果,当值越大时。视觉效果越大,值越小时,视觉效果越小,这个也应该很好理解,离的越近自然就越大,离的越远自然就看起来越小了。此代码和上面两个代码最大的区别在于应用了perspective属性,如果不使用此属性,将看不到演示效果,因为3D的场景就不会有景深的Z轴,关于perspective属性可以参阅
CSS3 perspective一章节。
translate3d()函数也可以拆分单独写:
[CSS] 纯文本查看 复制代码
transform:translateX(10px); 
transform:translateY(20px);
transform:translateZ(30px);

这里就不多介绍了,非常的简单,一看就明白。
发表于 2016-1-9 10:23:50 | 显示全部楼层
这个文章写的蛮不错的
发表于 2016-5-18 23:09:33 | 显示全部楼层
这个文章更是好,收藏了
发表于 2016-6-6 09:09:17 | 显示全部楼层
这个代码的演示很形象,真的很好
发表于 2016-9-24 15:48:01 | 显示全部楼层
这个是极好的,演示很给力
发表于 2016-10-16 18:30:57 | 显示全部楼层
这个是很好的文章
发表于 2016-10-31 01:29:35 | 显示全部楼层
为什么搜索的时候不是这个在第一页,我是从别的文章转过来
发表于 2017-8-16 17:50:20 | 显示全部楼层
文章写的非常好

发表回复

您需要登录后才可以回帖 登录 | 立即注册

本版积分规则

关于我们|手机版|小黑屋| ( 鲁ICP备10022556号-3 )

GMT+8, 2017-11-19 20:24 , Processed in 0.091085 second(s), 25 queries .

Powered by Discuz! X3.2 Licensed

Copyright © 2012-2017 Design: 蚂蚁部落

快速回复返回顶部 返回列表