一.概述

1.变形就是通过CSS改变元素的形状或位置

2.变形不会影响页面的布局

3.利用transform属性设置变形

4.变形的原点用transform-origin属性来设置，默认值为center

二.平移

1.transform：translateX（）；

（1）括号内可填入100px，-100px，1em等表示平移的像素
（2）可填入百分比，按照自身的比例，相对自身计算

2.transform：translateY（）；

（1）括号内可填入100px，-100px，1em等表示平移的像素
（2）可填入百分比，按照自身的比例，相对自身计算

3.transform：translateZ（）；

（1）括号内可填入100px，-100px，1em等表示平移的像素
（2）可填入百分比，按照自身的比例，相对自身计算
（3）z轴平移时立体效果（近大远小）默认情况情况下看不出来，需要自己给html根元素设置perspective属性
（4）html{
perspective：800px；/视距/
}
tranform： translateZ(100px)；

4.可以一起设置多个平移，中间空格隔开：transform：translateX（100px） translateY（200px）；

三.旋转

1.通过旋转可以使元素沿着x，y或z轴旋转指定角度

2.通过transform属性设置，属性值如下：

（1）rotateX()
（2）rotateY()
（3）rotateZ()

  • 括号内填入角度
  • 单位可以是deg，30deg就是30度

  • 单位还可以是turn，1turn就是一圈

    3.设置透明度：opacity属性

    （1）属性值0-1
    （2）0的时候就完全透明，看不见了
    （3）1的时候无透明效果

    3.钟表制作练习

    ```css <!DOCTYPE html> 

  1. <a name="HJGI4"></a>
  2. #### 4.立方体旋转
  3. ```css
  4. <!DOCTYPE html>
  5. <html lang="en">
  6. <head>
  7.     <meta charset="UTF-8">
  8.     <meta http-equiv="X-UA-Compatible" content="IE=edge">
  9.     <meta name="viewport" content="width=device-width, initial-scale=1.0">
  10.     <title>Document</title>
  11.     <style>
  12.         html{
  13.             perspective: 800px;
  14.         }
  16.         .cube{
  17.             width:200px ;
  18.             height: 200px;
  19.             margin: 0 auto;
  20.             margin-top: 250px;
  21.             animation: run  20s infinite linear;
  22.             transform-style: preserve-3d;
  23.         }
  25.         .cube> div{
  26.             width: 200px;
  27.             height: 200px;
  28.             opacity: 0.7;
  29.             position:absolute;
  31.         }
  33.         img{
  34.             vertical-align: top;
  35.             width: 200px;
  36.             height: 200px;
  37.         }
  38.         .box1{
  39.             transform: rotateY(90deg) translateZ(100px);
  40.         }
  41.         .box2{
  42.             transform: rotateY(-90deg) translateZ(100px);
  43.         }
  44.         .box3{
  45.             transform: rotateX(90deg) translateZ(100px);
  46.         }
  47.         .box4{
  48.             transform:rotateX(-90deg) translateZ(100px)
  49.         }
  50.         .box5{
  51.             transform: rotateY(180deg) translateZ(100px);
  52.         }
  53.         .box6{
  54.             transform: rotateY(0deg) translateZ(100px);
  55.         }
  56.         @keyframes run{
  57.             from{
  58.                 transform: rotateX(0) rotateZ(0);
  59.             }
  61.             to{
  62.                 transform: rotateX(1turn) rotateZ(1turn);
  63.             }
  64.         }
  65.     </style>
  66. </head>
  67. <body>
  68.     <div class="cube">
  69.         <div class="box1">
  70.             <img src="./1.jpg" alt="">
  71.         </div>
  72.         <div class="box2">
  73.             <img src="./2.jpg" alt="">
  74.         </div>
  75.         <div class="box3">
  76.             <img src="./3.jpg" alt="">
  77.         </div>
  78.         <div class="box4">
  79.             <img src="./4.jpg" alt="">
  80.         </div>
  81.         <div class="box5">
  82.             <img src="./5.jpg" alt="">
  83.         </div>
  84.         <div class="box6">
  85.             <img src="./6.jpg" alt="">
  86.         </div>
  87.     </div>
  88. </body>
  89. </html>

四.缩放（放大缩小）

1.通过transform属性设置，属性值如下：

（1）scale()：水平垂直双方向缩放
（2）scaleX()：水平方向缩放
（3）scaleY()：垂直方向缩放