【移动web篇】平面转换

平面转换

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

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

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

平面：

平面转换的平面指的是二维平面(2D)只有X和Y轴
例如：图片、背景图片、盒子…
默认以浏览器浏览窗口左上角为准（页面开发则以盒子左上角为准），水平向左为+X轴，水平向下为+Y轴

平移：

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

取值：可以正负
1.具体的像素单位；
2.百分比(参照盒子自身尺寸)

transform:translateX();
transform:translateY();
如果translate(只有一个值) === translateX()

*定位加 translate 任意盒子居中：

div {
        width: 300px;
        height: 300px;
        background-color: tomato;
        position: absolute;
        left: 50%;
        top: 50%;
        /* 如果有明确的宽高，可以使用margin来实现居中 */
        /* margin-top: -100px;
        margin-left: -100px; */
        /* translate如果以%作为单位，它参照的是元素自身的宽高 */
        transform: translate(-50%, -50%);
}

旋转：

• 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. 后面都是颜色值

---

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