前端学习-平面转换

1、transform属性

位移效果：translate(水平，垂直)
css属性有层叠性，最后一个生效



如果要只设置水平的，那可以用translate(水平)
但是如果要只设置垂直的，那就需要用translateY()
2、绝对定位居中


如下，可以给一个div元素设置前后选择器，先一起设置样式，再通过设置不同的一边，比如after，给他单独设置向右的属性值，然后设置位移100%，也就是全部淡出屏幕

然后如果不想让他不在div中仍然显示在浏览器的，那就用overflow:hidden,就可以隐藏起来；

3、转换原点

以下是设置旋转的原点，也就是围绕哪个点进行选择，可以设置右下角或者左下角，如下代码

4、多重转换

不要先旋转再位移，先旋转会改变坐标轴向，无法达到语气效果，如果有旋转，就放在最后书写


如果旋转放在前面书写x轴就不会按照预期指向进行移动

5、缩放

6、缩放-margin

缩放-位移实现

7、渐变

8、展示

9、综合案例

注意字体图标

最外层用一个大的div，并且整一个是居中的

三个div用li，在一行显示，用float将其转换为行内块元素

文字压在图片上面，是一定需要定位的，如下