当前位置：网站首页>平面转换（位移、旋转、缩放）

平面转换（位移、旋转、缩放）

2022-07-26 22:47:00 【前端开发boy】

平面转换概念（目标：使用transform属性实现元素的位移、旋转、缩放等效果）

1、位移（目标：使用translate实现元素位移效果）

语法：transform：translate（水平移动距离，垂直移动距离）；

取值（正负均可）：像素单位取值；百分比（参照物为盒子自身尺寸）注意：（x轴正为右，Y轴正为下）

技巧： translate（）如果只给出一个值，表示X轴方向移动距离；

单独设置某个方向的移动距离：translateX() & translY()

2.1平面转换旋转（目标：使用rotate实现元素旋转效果）

语法：transform:rotate(角度)；注意：角度单位是deg

技巧：取值正负均可（正-顺时针旋转；负-逆时针旋转）

<style>

img {

width: 250px;

margin: 100px;

transition: all 0.5s;

}

img:hover {

transform: rotate(360deg);

}

</style>

<body>

<img src="./images/rotate.png" alt=""> //插入图片

</body>

2.2转换原点（目标：使用transform-origin属性改变转换原点）该属性加在自己元素上

语法：默认圆点是盒子中心点； transform-origin：原点水平位置原点垂直位置；

取值：方位名词（left、top、right、bottom、center）

像素单位数值

百分比（参照盒子自身尺寸计算）

2.3多重转换（目标：使用transform复合属性实现多形态转换）

技巧：transform：translate（） rotate（）；

语法：transform：scale（x轴缩放倍数，y轴缩放倍数）；

技巧：一般情况下，只为scale设置一个值，表示x轴和y轴等比例缩放

transform：scale（缩放倍数）；

z-index 属性设置元素的堆叠顺序。拥有更高堆叠顺序的元素总是会处于堆叠顺序较低的元素的前面。

4、渐变（目标：使用background-image改变背景颜色渐变）

语法：background-image: linear-gradient(

transparent,//开始渐变色（无色）

rgba(0,0,0,0.6) //结束渐变色（使用rgba更好）

);

版权声明
本文为[前端开发boy]所创，转载请带上原文链接，感谢
https://blog.csdn.net/qq_58492621/article/details/125687290