CSS3——2D转换

CSS3——2D转换

2D转换transform可以实现元素的位移(translate)，旋转(rotate)，缩放(scale)等效果

1. 位移

   transform:translate(x,y)一起写
   transform:translateX(n)分开写
   transform:translateY(n)分开写
   若参数的单位是百分比，则是以盒子和高度和宽度来作为参考点的，也可以以px为单位
   优点：不会影响到其他元素
   缺点：对行内标签没有效果

img {
            width: 200px;
            height: 130px;
        }
        
        ul {
            float: left;
            list-style: none;
        }
        
        ul li {
            float: left;
            padding-left: 10px;
        }
        
        ul li:hover {
            transform: translate(0, -5px);
 }
 <div>
        <ul>
            <li><img src="1.jpg"></li>
            <li><img src="2.jpg"></li>
            <li><img src="3.jpg"></li>
            <li><img src="4.jpg"></li>
        </ul>
</div>

上述代码实现了鼠标移到li元素上，元素向X方向移动5px

2. 旋转
   transform:rotate(度数+deg)
   角度为正时，顺时针旋转
   角度为负时，逆时针旋转
   默认旋转的中心点是元素的中心点

 div {
            width: 300px;
            height: 300px;
            background-color: pink;
            border-radius: 40%;
            transition: all .5s;
        }
 div:hover {
            transform: rotate(45deg);
}
<div></div>

上述代码实现了鼠标移到div元素上元素顺时针旋转45°

3. 缩放

transform:scale(x,y)
1就是1倍，2就是2倍
0.5就是0.5倍
优点：
1.不会影响其他盒子
2.可以设置移动的中心点

div {
            width: 200px;
            height: 200px;
            background-color: pink;
            margin: 100px auto;
        }
div:hover {
            transform: scale(2, 2);
 }
 <div></div>

上述代码实现了鼠标移到div上div宽和高扩大一倍