八、变形

8.1 2D变形

transform: 变形

8.1.1 旋转：rotate()

旋转：rotate()

单位是deg

正方向：顺时针

.box {
            width: 200px;
            border: 1px solid #000; 
        }
        .box img {
            width: 100%;
        }

img是行内元素，需要转块

display: block;

.box:hover img {
            transform:rotate(30deg);  /*顺时针旋转30°*/
        }

8.1.2 放缩 scale（数字）

scale(数字)

没有单位

0-1表示缩小

1-无穷 表示放大

/* 父盒子 溢出隐藏 */
            overflow: hidden;

transform: scale(1.2);

8.1.3 水平、垂直斜切 skew（）

skew()

单位：deg

transform:skew(10deg,40deg);

8.1.4 2D变形综合

同一个元素可以有多个变形，用空格隔开。

元素没有变形 none

transform:rotate(90deg) scale(1.2) skew(30deg,45deg);

8.2 2D空间移动

空间移动：

transform：translateX（）表示水平方向移动（表示相对于自身当前位置进行偏移）

transform：translateY（）表示垂直方向移动

transform：translate（ 水平方向，垂直方向 ）

单位：px

transform:translateX(10px); 
transform:translateY(10px);
transform:translate(10px,10px);

绝对定位的水平居中：

left:50%;

margin-left:-自身宽度/2 （可以用空间移动来实现）

/*子绝父相*/
left:50%;
transform: translateX(-50%);

8.3 练习

 <div class="box">
     <ul>
         <li><a href="">我要约考</a></li>
         <li class="no2"><a href="">班型介绍</a></li>
         <li class="no3"><a href="">班车服务</a></li>
         <li class="no4"><a href="">在线法培</a></li>
         <li class="no5"><a href="">网上约车</a></li>
     </ul>
 </div>


<style>
     /* 清除默认样式 */
     * {
         padding: 0;
         margin: 0;
     }
     a {
         text-decoration: none;
         color: #fff;
     }
     ul, ol {
         list-style: none;
     }
     body {
         font-family: "Arial", "Microsoft Yahei";
         font-size: 14px;
     }
     .box {
         width: 700px;
         padding: 20px;
         border: 1px solid #000;
         background-color: rgba(0,0,0,.2);
         margin: 50px auto;
         overflow: hidden;
     }
     .box ul li {
         float: left;
         width: 107px;
         height: 107px;
         /* 同级元素有距离margin */
         margin-right: 20px;
         position: relative;
     }
     .box ul li::after {
         content: "";
         position: absolute;
         height: 107px;
         width: 107px;
         background-image: url(images/a_1.png);
         top: 0;
         left: 0;
         transition: all 1s linear 0s;
     }
     .box ul li.no2::after {
         background-image: url(images/a_2.png);
     }
     .box ul li.no3::after {
         background-image: url(images/a_3.png);
     }
     .box ul li.no4::after {
         background-image: url(images/a_4.png);
     }
     .box ul li.no5::after {
         background-image: url(images/a_5.png);
     }
     .box ul li::before {
         content: "";
         position: absolute;
         width: 46px;
         height: 42px;
         background-image: url(images/tb_1.png);
         left: 50%;
         top: 20px;
         transform: translateX(-50%);
         /* 自定义压盖顺序 */
         z-index: 4;
     }
     .box ul li.no2::before {
         background-image: url(images/tb_2.png);
         width: 40px;
     }
     .box ul li.no3::before {
         background-image: url(images/tb_3.png);
         width: 34px;
     }
     .box ul li.no4::before {
         background-image: url(images/tb_4.png);
         width: 41px;
     }
     .box ul li.no5::before {
         background-image: url(images/tb_5.png);
         width: 44px;
     }
     .box ul li a {
         display: block;
         width: 100%;
         height: 100%;
         /* line-hight 数值大于盒子高度 偏下显示 */
         line-height: 150px;
         text-align: center;
         /* 有定位的元素压盖没有定位的元素
            有定位的元素才可以设置z-index
          */
          position: relative;
          z-index: 10;
     }
     .box ul li:hover::after {
         background-image: url(images/a_1_h1.png);
         transform: rotate(360deg);
     }
     .box ul li.no2:hover::after {
         background-image: url(images/a_2_h1.png);
     }
     .box ul li.no3:hover::after {
         background-image: url(images/a_3_h1.png);
     }
     .box ul li.no4:hover::after {
         background-image: url(images/a_4_h1.png);
     }
     .box ul li.no5:hover::after {
         background-image: url(images/a_5_h1.png);
     }   
 </style>