表达式后面的先执行

  1. translateScale.style.webkitTransform = 'translate(30px) scale(1.5)';

rotate，skew，scale，translate：

  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4.     <meta charset="UTF-8">
  5.     <meta name="viewport" content="width=device-width, initial-scale=1.0">
  6.     <meta http-equiv="X-UA-Compatible" content="ie=edge">
  7.     <title>Document</title>
  8.     <style>
  9.         *{margin: 0;padding: 0;}
  10.         .con{
  11.             width: 100px;
  12.             height: 100px;
  13.             border:1px solid green;
  14.             display: flex;
  15.             margin-bottom: 10px;
  16.         }
  17.         .translate-scale,.translate,.scale,.skew,.rotate{
  18.             width: 50px;
  19.             height: 50px;
  20.             background: orange;
  21.             margin: auto;
  22.             line-height: 50px;
  23.             text-align: center;
  24.             color: #ffffff;
  25.             transition: all .5s;
  26.         }
  27.     </style>
  28. </head>
  29. <body>
  30.     <h1>transform2D 变换</h1>
  31.     <h3>旋转</h3>
  32.     <div class="con">
  33.         <div class="rotate">
  34.             旋转
  35.         </div>
  36.     </div>
  37.     <h3>斜切</h3>
  38.     <div class="con">
  39.         <div class="skew">
  40.             斜切
  41.         </div>
  42.     </div>
  43.     <h3>缩放</h3>
  44.     <div class="con">
  45.         <div class="scale">
  46.             缩放
  47.         </div>
  48.     </div>
  49.     <h3>位移</h3>
  50.     <div class="con">
  51.         <div class="translate">
  52.             位移
  53.         </div>
  54.     </div>
  55.     <h3>位移+缩放</h3>
  56.     <div class="con">
  57.         <div class="translate-scale">
  58.             位移+缩放
  59.         </div>
  60.     </div>
  61.     <script>
  62.         // 旋转
  63.         var rotate = document.querySelector('.rotate');
  64.         // 围绕中心点旋转，默认为顺时针
  65.         rotate.addEventListener('touchstart',(e)=>{
  66.             rotate.style.webkitTransform = 'rotate(90deg)';
  67.         });
  69.         // 斜切
  70.         var skew = document.querySelector('.skew');
  71.         // X,Y方向， 围绕中心点（默认）拉两个角
  72.         skew.addEventListener('touchstart',(e)=>{
  73.             skew.style.webkitTransform = 'skewX(30deg) skewY(45deg)';
  74.         });
  76.         // 缩放
  77.         var scale = document.querySelector('.scale');
  78.         // 传数字（无单位），基于原来的大小，围绕中心点（默认）X,Y
  79.         scale.addEventListener('touchstart',(e)=>{
  80.             // scale.style.webkitTransform = 'scale(2)';
  81.             // scale.style.webkitTransform = 'scale(1.5,2)';
  83.             scale.style.webkitTransform = 'rotate(360deg) scale(0.1)';
  84.         });
  86.         // 位移px,默认为 X轴
  87.         var translate = document.querySelector('.translate');
  88.         // X,Y可以为负值
  89.         translate.addEventListener('touchstart',(e)=>{
  90.             //translate.style.webkitTransform = 'translate(25px, 25px)';
  91.             translate.style.webkitTransform = 'rotate(360deg) translate(-50px,50px) scale(0.1)';
  92.         });
  94.         // 位移+缩放
  95.         var translateScale = document.querySelector('.translate-scale');
  96.         // X,Y可以为负值
  97.         translateScale.addEventListener('touchstart',(e)=>{
  98.             // 表达式后面的先执行
  99.             translateScale.style.webkitTransform = 'translate(30px) scale(2)';
  100.         });
  101.     </script>
  102. </body>
  103. </html>

3D变换：

位移translate，向Z轴移动-100，效果非常微弱，几乎看不出变化。
加CSS：

/ 景深 /
perspective: 50px;

  1. .con{
  2.   width: 100px;
  3.   height: 100px;
  4.   border:1px solid green;
  5.   display: flex;
  6.   margin-bottom: 10px;
  7.   /* 景深 */
  8.   perspective: 50px;
  9. }

perspective：景深
简单来说，就是设置这个属性后，那么，就可以模拟出像我们人看电脑上的显示的元素一样。比如说， perspective：800px 意思就是，我在离屏幕800px 的地方观看这个元素。(这个属性，要设置在父元素上面)。
image.png

  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4.     <meta charset="UTF-8">
  5.     <meta name="viewport" content="width=device-width, initial-scale=1.0">
  6.     <meta http-equiv="X-UA-Compatible" content="ie=edge">
  7.     <title>Transform</title>
  8.     <style>
  9.         *{margin: 0;padding: 0;}
  10.             .con{
  11.                 width: 100px;
  12.                 height: 100px;
  13.                 border:1px solid green;
  14.                 display: flex;
  15.                 margin-bottom: 10px;
  16.                 /* 景深 */
  17.                 perspective: 50px;
  18.             }
  19.             .translate-scale,.translate,.scale,.skew,.rotate{
  20.                 width: 50px;
  21.                 height: 50px;
  22.                 background: orange;
  23.                 margin: auto;
  24.                 line-height: 50px;
  25.                 text-align: center;
  26.                 color: #ffffff;
  27.                 transition: all .5s;
  28.             }
  29.     </style>
  30. </head>
  31. <body>
  32.     <h1>transform3D变换</h1>
  33.     <h3>旋转</h3>
  34.     <div class="con">
  35.         <div class="rotate">
  36.             旋转
  37.         </div>
  38.     </div>
  40.     <h3>位移</h3>
  41.     <div class="con">
  42.         <div class="translate">
  43.             位移
  44.         </div>
  45.     </div>
  46. </body>
  47. <script>
  48.     // 旋转
  49.     var rotate = document.querySelector(".rotate");
  50.     rotate.addEventListener("touchstart",()=>{
  51.         rotate.style.WebkitTransform = "rotateZ(45deg)";
  52.     })
  54.     // 位移
  55.     var translate = document.querySelector(".translate");
  56.     translate.addEventListener("touchstart",()=>{
  57.         translate.style.WebkitTransform = "translateZ(-100px)";
  58.     })
  59. </script>
  60. </html>

父级和子级都有3D效果，子级的效果如果被父级覆盖，则需要在父级元素上加：

  1. transform-style: preserve-3d;
  2. <!DOCTYPE html>
  3. <html lang="en">
  4. <head>
  5.     <meta charset="UTF-8">
  6.     <meta name="viewport" content="width=device-width, initial-scale=1.0">
  7.     <meta http-equiv="X-UA-Compatible" content="ie=edge">
  8.     <title>transform-style</title>
  9.     <style>
  10.         .div1{
  11.             position: relative;
  12.             height: 300px;
  13.             width: 300px;
  14.             padding:20px;
  15.             border: 1px solid gray;
  16.         }
  18.         .div2{
  19.             padding:50px;
  20.             position: absolute;
  21.             border: 1px solid black;
  22.             background-color: green;
  23.             /* 3D转换 */
  24.             transform: rotateY(60deg);
  25.             /* 父级 */
  26.             transform-style: preserve-3d;
  27.         }
  29.         .div3{
  30.             padding:30px;
  31.             position: absolute;
  32.             border: 1px solid black;
  33.             background-color: orange;
  34.             /* 3D转换 */
  35.             transform: rotateY(-60deg);
  36.         }
  37.     </style>
  38. </head>
  39. <body>
  40.     <div class="div1">
  41.         <div class="div2">我是div2，父级
  42.             <div class="div3">div3</div>
  43.         </div>
  44.     </div>
  45. </body>
  46. </html>

第一个封装版本：

  1. function cssTransform(ele, attr, val){
  2.     // ele:操作的元素
  3.     // 运动属性
  4.     // val 具体的值
  5.     if(!ele.transform){
  6.         ele.transform = {};
  7.     }
  9.     if (typeof val === 'undefined'){
  10.         // 取不到值的话，给默认值
  11.         if(typeof ele.transform[attr] === "undefined") {
  12.             switch(attr){
  13.                 case 'scale':
  14.                 case 'scaleX':
  15.                 case 'scaleY':
  16.                 case 'scaleZ':
  17.                     ele.transform[attr] = 1;
  18.                     break;
  19.                 default:
  20.                     ele.transform[attr] = 0;
  21.             }
  22.         }
  23.         // 取值
  24.         return ele.transform[attr];
  25.     }
  26.     else {
  27.         // 设置值
  28.         ele.transform[attr] = val;
  29.         let transformValue = '';
  31.         for(var name in ele.transform) {
  32.             switch(name){
  33.                 case "scale":
  34.                 case "scaleX":
  35.                 case "scaleY":
  36.                 case "scaleZ":
  37.                     transformValue += "" + name + "(" + (ele.transform[name])  + ")";
  38.                     break;
  39.                 case "rotate":
  40.                 case "rotateX":
  41.                 case "rotateY":
  42.                 case "rotateZ":
  43.                 case "skewX":
  44.                 case "skewY":
  45.                     transformValue += "" + name + "(" + (ele.transform[name])  + "deg)";
  46.                     break;
  47.                 default:
  48.                     transformValue += "" + name + "(" + (ele.transform[name])  + "px)";
  49.             }
  51.             ele.style.webkitTransform = ele.style.transform = transformValue;
  52.         }
  53.     }
  54. }
  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4.     <meta charset="UTF-8">
  5.     <meta name="viewport" content="width=device-width, initial-scale=1.0">
  6.     <meta http-equiv="X-UA-Compatible" content="ie=edge">
  7.     <title>Document</title>
  8.     <style>
  9.             *{margin: 0;padding: 0;}
  10.             .con{
  11.                 width: 100px;
  12.                 height: 100px;
  13.                 border:1px solid green;
  14.                 display: flex;
  15.                 margin-bottom: 10px;
  16.             }
  17.             .translate-scale,.translate,.scale,.skew,.rotate{
  18.                 width: 50px;
  19.                 height: 50px;
  20.                 background: orange;
  21.                 margin: auto;
  22.                 line-height: 50px;
  23.                 text-align: center;
  24.                 color: #ffffff;
  25.                 transition: all .5s;
  26.             }
  28.         </style>
  29. </head>
  30. <body>
  31.     <h1>transform2D变换</h1>
  32.     <h3>旋转</h3>
  33.     <div class="con">
  34.         <div class="rotate">
  35.             旋转
  36.         </div>
  37.     </div>
  38.     <h3>斜切</h3>
  39.     <div class="con">
  40.         <div class="skew">
  41.             斜切
  42.         </div>
  43.     </div>
  44.     <script src="./transform1.0.js"></script>
  45.     <script>
  46.         var rotate = document.querySelector('.rotate');
  47.         rotate.addEventListener('touchstart',(e)=>{
  48.             cssTransform(rotate, 'rotate', 90);
  49.             cssTransform(rotate, 'scale', 2);
  50.         });
  51.     </script>
  52. </body>
  53. </html>

注意：

定义变量时，使用一个var比使用多个var效率更高。

  1. var d =1, d1=2, d2=3;
  2. 和
  3. var d=1;
  4. var d1=2;
  5. var d2=3;

第二个版本：

  1. function Transform(element){
  2.     var units = {},
  3.         transform,
  4.         transforms = {},
  5.         attrs = ['scale', 'scaleX','scaleY','scaleZ', 'rotate', 'rotateX',  'rotateY', 'rotateZ','skew', 'skewX', 'skewY', 'translate', 'translateX', 'translateY', 'translateZ'];
  7.     attrs.forEach(function(attr){
  8.         if (attr.indexOf('scale') >= 0){
  9.             units[attr] = '';
  10.             // 设置默认值
  11.             transforms[attr] = 1;
  12.         }
  13.         else {
  14.             units[attr] = attr.indexOf('translate') >= 0 ? 'px' : 'deg';
  15.             // 设置默认值
  16.             transforms[attr] = 0;
  17.         }
  19.         // 在对象上定义一个属性
  20.         Object.defineProperty(element, attr, {
  21.             get: function(){
  22.                 return transforms[attr];
  23.             },
  24.             set: function(value){
  25.                 transform = '';
  26.                 transforms[attr] = value;
  27.                 attrs.forEach(function(attr){
  28.                     transform += attr + '(' + transforms[attr] + units[attr]  + ')';
  29.                 });
  30.                 console.log(transform);
  31.                 element.style.transform = transform;
  32.             }
  33.         });
  34.     });
  35. }

DOM 赋能:
Transform(rotate);

  1. <script>
  2.         var rotate = document.querySelector('.rotate');
  3.         rotate.addEventListener('touchstart',(e)=>{
  4.             // DOM 赋能
  5.             Transform(rotate);
  6.             rotate.rotate = 90;
  7.             var deg = rotate.rotate;
  8.             console.log(deg);
  9.         });
  10.     </script>

image.png

移动端自定义滑动区域

  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4.     <meta charset="UTF-8">
  5.     <meta name="viewport" content="width=device-width, initial-scale=1.0">
  6.     <meta http-equiv="X-UA-Compatible" content="ie=edge">
  7.     <title>Document</title>
  8.     <style>
  9.         body{
  10.                 margin: 0;
  11.                 padding: 0;
  12.             }
  13.         body,html{
  14.             height: 100%;
  15.             overflow: hidden;
  16.             position: relative;
  17.         }
  18.         header{
  19.             width: 100%;
  20.             height: 40px;
  21.             background: greenyellow;
  22.             color: black;
  23.             line-height: 40px;
  24.             text-align: center;
  25.         }
  26.         #wrap{
  27.             position: absolute;
  28.             top:40px;
  29.             bottom: 0;
  30.             right: 0;
  31.             left: 0;
  32.             overflow: hidden;
  33.         }
  34.         #list{
  35.             margin: 0;
  36.             padding: 0;
  37.             list-style: none;
  38.         }
  39.         #list li{
  40.             background: #ffffff;
  41.             color: #333333;
  42.             height: 40px;
  43.             line-height: 40px;
  44.             border-bottom: 1px solid #999999;
  45.             text-indent: 20px;
  46.         }
  47.     </style>
  48. </head>
  49. <body>
  50.     <header>
  51.         我是Header
  52.     </header>
  53.     <div id="wrap">
  54.         <ul id="list"></ul>
  55.     </div>
  56.     <script>
  57.         function $my(id){
  58.             return document.getElementById(id);
  59.         }
  60.         function initList(){
  61.             var list = $my('list');
  62.             var html = '';
  63.             for(var i=0; i<80; i++){
  64.                 html += '<li>第' + (i+1)  + '个</li>';
  65.             }
  67.             list.innerHTML = html;
  68.         }
  70.         initList();
  72.         var wrap = $my('wrap');
  73.         var lists = $my('list');
  75.         var startY = 0;
  77.         lists.addEventListener('touchstart', (e)=>{
  78.             startY = e.changedTouches[0].pageY;
  79.         });   
  80.         lists.addEventListener('touchmove', (e)=>{
  81.             var moveY = e.changedTouches[0].pageY;
  83.             // 距离 = 起始点 - 活动点
  84.             var distance = moveY - startY;
  85.             if (distance < 0) {
  86.                 lists.style.webkitTransform = lists.style.transform = 
  87.                 'translateY(' + distance + 'px)';
  88.             }
  89.         });      
  91.     </script>
  92. </body>
  93. </html>