今天学习了transform的几种变换属性

最新推荐文章于 2021-08-18 23:26:14 发布

laffey711009

最新推荐文章于 2021-08-18 23:26:14 发布

阅读量1.2k

点赞数

文章标签： css

本文链接：https://blog.csdn.net/laffey711009/article/details/107528838

版权

本文详细介绍了CSS中的transform属性，包括translate的2D移动，如何通过translateX和translateY平移元素而不影响布局。还讨论了rotate的使用，包括旋转角度的正负方向以及创建小三角形的示例。最后，讲解了transform-origin如何改变转换的中心点，并给出了实际应用场景。

摘要由CSDN通过智能技术生成

transform变换

transform: translate(x,y);

1、2D移动是2D转换里面的一个功能，可以改变元素在页面中的位置，类似定位。
2、如果只需要移动移动X轴：transform: translateX(100px)；
3、如果只需要移动移动Y轴：transform: translateY(100px)；

重点：
1、定义2D转换，表示在x轴和y轴上的平移。
2、translate最大的优点：不会影响其他元素的位置。
3、translate中的百分比单位是相对于自身的 transform: translate(50%,50%);

应用小场景：
移动盒子的位置有三种方法：定位，盒子的外边距，2d转换移动。
这里演示2d转换移动的。

让一个盒子水平垂直居中：

		<!-- 父盒子 -->
		<div class="father">
			<!-- 子盒子  -->
        	<div class="son"></div>
    	</div>

		.father {
   
			/* 子绝父相 */
            position: relative;
            width: 1500px;
            height: 1500px;
            background-color: pink;