移动web_平面转换

平面转换

• 平面
• 平移
• 旋转
• 缩放

概念：使用transform属性实现元素的位移、旋转、缩放等效果

注意点：行内元素所有的平面转换是没有效果的

平面：

平面转换的平面指的是二维平面(2D)只有X和Y轴

例如：图片、背景图片、盒子...

默认以浏览器浏览窗口左上角为准（页面开发则以盒子左上角为准），水平向左为+X轴，水平向下为+Y轴

平移：

• transform:translate (X轴偏移量，Y轴偏移量)

取值：可以正负

1.具体的像素单位；

2.百分比(参照盒子自身尺寸)

transform:translateX();

transform:translateY();

如果translate(只有一个值) === translateX()

旋转：

• transform:rotate(角度deg) 注：一定要加角度单位deg

取值：

1.正值：顺时针旋转；

2.负值：逆时针旋转；

3.默认以Z轴旋转，转换旋转点可用 transform-origin:(方位/像素/百分比)

transform-origin: right top;
/* transform-origin: -100px -100px; */
/* transform-origin: -50% -50%; */

ps：进行多种平面转换时，一定要把旋转转换放在最后

缩放：

• transform:scale(倍数)
• transform:scale(X倍数，Y倍数)

取值：

1.大于1放大；

2.小于1缩小

(线性)渐变：

• background-image:linear-gredient([方向],参数1,参数2,参数3.....)
  
  线性渐变：从一个方向到另外一个方向
  
  参数是指颜色

取值：

1. 参数1：方位
   
   a.方位名词：to right，to left bottom；
   
   b.角度deg，就不用再加to，直接设置角度
2. 后面都是颜色值

---

仅供学习参考，如有不足请多多指正