一切福田，不離方寸，從心而覓，感無不通。

CSS translate3d(x,y,z)

translate3d方法用来规定指定元素在三维空间中的位移。

用法比较简单，本文将通过一段代码实例动态演示translate3d的效果。

与二维空间位移相比多Z轴的位移，具体参阅CSS3 translate(x,y)一章节。

transform变换更多内容参阅CSS3 2D/3D转换一章节。

语法结构：

1
transform:translate3d(x,y,z)

参数解析：

（1）.x：表示在x轴方向的位移。

（2）.y：表示在y轴方向的位移。

（3）.z：表示在z轴方向的位移。

代码实例如下：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
<!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;
  perspective:1200px;
}
#ant{
  width:100px;
  height:100px;
  text-align:center;
  line-height:100px;
  font-size:12px;
  border:1px solid black;
  background-color:yellow;
      
  transform:translate3d(0px,0px,0px);
}
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(x,y,z){ 
  var odiv = document.getElementById("ant");
  var oshow = document.getElementById("show");
  odiv.style.transform = "translate3d(" + x + "px," + y + "px," + z + "px)";
  oshow.innerHTML = x_range.value + "/" + y_range.value + "/" + z_range.value;
}
window.onload=function(){
  var x_range = document.getElementById("x_range");
  var y_range = document.getElementById("y_range");
  var z_range = document.getElementById("z_range");
  x_range.onmousemove = function () {
    change(x_range.value, y_range.value, z_range.value);
  }
  y_range.onmousemove = function () {
    change(x_range.value, y_range.value, z_range.value);
  }
  z_range.onmousemove = function () {
    change(x_range.value, y_range.value, z_range.value);
  }
}
</script>
</head>
<body>
<div id="box">
  <div id="ant">蚂蚁部落</div>
</div>
<table> 
  <tr> 
    <td class="left">x轴位移:</td> 
    <td><input type="range" min="-200" step="1" max="200" id="x_range" value="0"/></td> 
  </tr> 
  <tr>
    <td class="left">y轴位移:</td>
    <td><input type="range" min="-200" step="1" max="200" id="y_range" value="0" /></td>
  </tr>
  <tr>
    <td class="left">z轴位移:</td>
    <td><input type="range" min="-200" step="1" max="200" id="z_range" value="0" /></td>
  </tr>   
  <tr> 
    <td class="left">x/y/z:</td> 
    <td>(<span id="show">0/0/0</span>)</td> 
  </tr> 
</table> 
</body> 
</html>

上面的代码结合JavaScript演示了translate3d方法的功能。

特别说明：如果不使用perspective属性，将看不到z轴演示效果，因为3D场景就不会有景深的Z轴。

perspective属性参阅CSS3 perspective一章节。

translate3d方法也可以拆分单独写:

1
2
3
transform:translateX(10px);
transform:translateY(20px);
transform:translateZ(30px);

 

from:http://www.softwhy.com/article-8720-1.html

Copyright © 2024 Longsheng All rights reserved.