变形：平移、旋转与缩放

变形就是指通过css来改变元素的形状或位置

变形不会影响到页面的布局

transform用来设置元素的变形效果

1、平移

translateX() 沿着由方向平移
translateY() 沿着y轴方向平移
translateZ() 沿着z轴方向平移平移元素

百分比是相对于自身计算的

几种水平垂直双方向居中的方式对比

绝对定位的方式

/* 这种居中方式，只适用于元素的大小确定 */
position: absolute;
top: 0;
left: 0;
bottom: 0;
right: 0;
margin: auto;

2、Z轴平移

z轴平移，调整元素在z轴的位置，正常情况就是调整元素和人眼之间的距离，距离越大，元素离人越近

z轴平移属于立体效果（近大远小），默认情况下网页是不支持透视，如果需要看见效果必须要设置网页的视距

透视效果

html {
    background-color: rgb(71, 44, 32);
    perspective: 800px;
}

.box {
    width: 200px;
    height: 300px;
    background-color: silver;
    margin: 100px auto;
    transition: all .3s;
}

.box:hover {
    box-shadow: 0 0 10px rgba(0, 0, 0, .2);
    transform: translateZ(200px);
}

3、旋转

通过旋转可以使元素沿着x、y或z旋转指定的角度

rotateX()
rotateY()
rotateZ()

/* transform: rotateY(0.5turn); */
transform: rotateY(180deg);

旋转效果

4、缩放

对元素进行缩放的函数

scalex() 水平方向缩放
scaleY() 垂直方向缩放
scale() 双方向的缩放

.box {
    height: 200px;
    width: 200px;
    background-color: #bfa;
    margin: 200px auto;
    transition: 2s;
}

.box:hover {
    /* transform: scaleX(2); */
    /* transform: scaleY(2); */
    transform: scale(2);
    /* 变形的原点 */
    transform-origin: 0 0;
}

变形原点

5、实战

时钟表

html代码

<!DOCTYPE html>
<html lang="en">
 <head>
  <meta charset="UTF-8">
  <meta name="Generator" content="EditPlus®">
  <meta name="Author" content="">
  <meta name="Keywords" content="">
  <meta name="Description" content="">
  <title>Document</title>
  <style type="text/css">
  .clock{
        height:600px;
        background-color:orange;
        width:600px;
        margin:500px 500px;
        position:relative;
        border-radius:50%;
        
  }
    .secWrapper{
        height:600px;
        width:5px;
        top:0px;
        left:300px;
        position:absolute;
        animation: secondPointer 60s steps(60) infinite;
    }
    .sec{
        height:50%;
        background-color:red;
        width:5px;
    }
    .minWrapper{
        height:400px;
        width:8px;
        top:100px;
        left:300px;
        position:absolute;
        animation: secondPointer 300s steps(60) infinite;
    }
    .min{
        height:50%;
        background-color:black;
        width:8px;
    }
   .hourWrapper{
        height:200px;
        width:11px;
        position:absolute;
        top:200px;
        left:300px;
        animation: secondPointer 480s steps(60) infinite;
    }
    .hour{
        height:50%;
        background-color:black;
        width:11px;

    }

    @keyframes secondPointer{
        from {
           transform:rotateZ(0);
        }

        to {
           transform:rotateZ(360deg);
        }
    }

  </style>
 </head>
 <body>
 <div  class="clock">
     <div class="secWrapper">
            <div class="sec">
    
            </div>
     </div>
    <div class="minWrapper">
         <div class="min">
         </div>
    </div>

    <div class="hourWrapper">
         <div class="hour">
        
         </div>
    </div>

 </div>

 </body>
</html>

CSS3 变形：平移、旋转与缩放