2d转换 之translate
坐标转换类似于定位。
transform:translate(x,y);
transform:translateY(n);
transform:translateX(n);
我们移动盒子的方式有三种：定位，margin, 2d转换移动
div {
width: 200px;
height: 200px;
background-color: pink;
transform: translate(100px, 61px);
}
重点：
- 不用影响其他的元素位置，还是占有原来的位置的。
- 百分比是相对于自身元素
transparent(50%,50%); - 对行内元素没有效果
2d转换之 rotate
transform:rotate(<度数>);
重点：
- <度数>的单位是
deg（就是度） 比如 45deg=45° - 默认的旋转中心是元素的中心点
实现如下效果:
<style>
div {
width: 50px;
height: 50px;
border: 1px solid pink;
border-radius: 50%;
margin: 100px auto;
transition: all 1s;
}
div img {
width: 50px;
height: 50px;
border-radius: 50%;
}
div:hover {
transform: rotate(360deg);
}
</style>
<body>
<div>
<img src="https://yingwiki.top/avatar" alt="">
</div>
</body>
设置选择中心点 transform-origin
transform-origin:x y;
重点
- 默认值为
transform-origin:50% 50%;,百分比同样以自身为参考 - x y还可以是方位词：top right left center 等
- 通过这个还可以设置缩放中心点
缩放scale
transform:scale(x,y);
x y是控制宽和高的放大倍率
重点：
transform:scale(1,1);没有变化transform:scale(2,2);放大两倍transform:scale(0.5,0.5);缩小一倍- 注意当x=y时，可以简写
transform:scale(n);只写一个 - 可以设置缩放的参考点，默认是以中心缩放，不会影响其他盒子的布局，只占用原来的位子
- 设置缩放中心点是通过这个来设置
transform-origin
分页按钮效果练习
<style>
li {
float: left;
width: 30px;
height: 30px;
margin: 0 5px;
border: 1px solid cornflowerblue;
border-radius: 30px;
list-style: none;
text-align: center;
line-height: 30px;
transition: all .5s;
}
li:hover {
transform: scale(1.3);
}
a {
text-decoration: none;
color: cornflowerblue;
}
</style>
<body>
<div>
<ul>
<li><a href="#">1</a></li>
<li><a href="#">2</a></li>
<li><a href="#">3</a></li>
<li><a href="#">4</a></li>
<li><a href="#">5</a></li>
<li><a href="#">6</a></li>
<li><a href="#">7</a></li>
</ul>
</div>
倾斜 skewX(a) skewY(a)
skewX(a)变换函数指定了沿 x 轴倾斜 a° 的倾斜变换。
skewY(a)变换函数指定了沿 y 轴倾斜 a° 的倾斜变换。
2d转换的混合写法
格式：transform:translate(15) rotate(15deg) scale(1.5)
当然这个执行的顺序就是就是我们书写的顺序，如果先旋转后位移则我们移动参考点是选择之后的了，为了到达我们的目标，我们一定要先写位移 translate后旋转之类的，当然你想实现那种效果也无妨，这里提醒一下。
结语
放假咸鱼的第13天
