当前位置：首页 > news >正文

css3 TransformZ() 3D缩放

news 来源：原创 2024/4/28 4:39:01

transformZ()函数做了一个在Z轴移动的工作，3D空间中，Z轴垂直于x-y所在平面-也就是界面所在的平面，而我们的视角正好垂直于xy平面，所以进行transformZ() 3D缩放，其实在我们的视角中是一个在远离X-Y平面与接近X-Y平面的过程，当其值为0可以理解为就在x-y平面上；当其为正值的时候，其向指向界面外移动，当其值愈大，则移动得愈远，在我们的视角，就会呈现一个愈来愈大的元素；反之为负值，则会向界面内进行移动，其负值愈小，则离界面愈远，我们视角看上去它呈现的元素就愈来愈小。

实例：

HTML：

1 <div class="demo">
2     <h4 class="title">舞台视角大小201像素，子元素translateZ值为: <span id="translateZ" class="translateZ">0</span>px;</h4>
3     <p class="range_area">-100 
4         <input type="range" id="range" min="-100" max="300" step="5" value="0" autocomplete="off" /> 300
5     </p>
6     <div id="stage" class="container">
7         <div class="piece"></div>
8     </div>
9 </div>

View Code

css:

 1 .demo {width:500px;margin:10px;border:1px solid red;}
 2 .demo .title {text-align: center;font-size: 1em;}
 3 .translateZ {color:red;}
 4 .range_area {text-align: center;}
 5 .range_area input {position:relative;width:300px;z-index:100;}
 6 .demo .container {
 7     width:400px;
 8     height:100px;
 9     padding:50px;
10     background:#f0f0f0;
11     box-shadow: inset 0 0 3px rgba(0,0,0,.35);
12     -webkit-transition: top .5s;
13     -moz-perspective: 201px;
14     -webkit-perspective: 201px;
15     perspective: 201px;
16     position: relative;
17     z-index: 2;
18     top: 0;
19 }
20 .piece {
21     width: 100px;
22     height: 100px;
23     margin: 0 auto;
24     background-color:red;
25     padding: 10px;
26     -moz-box-sizing: border-box;
27     -webkit-box-sizing: border-box;
28     box-sizing: border-box;
29     position: relative;
30 }

View Code

JS:

 1 (function(){
 2     var randomColor = function(){
 3         return "hsla("+Math.round(360 * Math.random())+","+"60%,50%,.75)";
 4     };
 5     // css transform 变换
 6     var transform = function(element, value, key) {
 7         key = key || "Transform";
 8         ["Moz", "O", "Ms", "Webkit", ""].forEach(function(prefix) {
 9             element.style[prefix + key] = value;    
10         }); 
11         
12         return element;
13     };
14     var $ = function(selector) {
15         return document.querySelector(selector);
16     };
17     // 获取元素
18     var eleStage = $("#stage"),
19         range = $("#range"),
20         piece = $(".piece"),
21         translateZ = $("#translateZ");
22 
23     // 添加时间监听器
24     range.addEventListener("change",function(){
25 
26         transform(piece,"translateZ("+this.value+"px)");
27         translateZ.innerHTML = this.value;
28     });
29     console.log(range.value);
30     transform(piece,"translateZ("+range.value+"px)");
31 
32     piece.style.backgroundColor = randomColor();
33 })();