CSS3的3D转换translate3d(x,y,z)函数
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轴方向的位移:
<!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轴方向的位移:
<!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轴方向位移:
<!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()函数也可以拆分单独写:
transform:translateX(10px); transform:translateY(20px); transform:translateZ(30px);
这里就不多介绍了，非常的简单，一看就明白。
原文地址是:CSS3的3D转换translate3d(x,y,z)函数一章节。