CSS平面转换 - 技术栈

文章目录

- 01-平面转换
- - 简介
  - [平移 transform: translate()](#平移 transform: translate())
  - 定位居中
  - [旋转 transform: rotate()](#旋转 transform: rotate())
  - [转换原点 transform-origin:](#转换原点 transform-origin:)
  - 多重转换
  - [缩放transform: scale()](#缩放transform: scale())
  - [倾斜 transform: skew()](#倾斜 transform: skew())
- 02-渐变
- - [线性渐变 bgi:linear-gradient()](#线性渐变 bgi:linear-gradient())
  - [径向渐变 bgi:radial-gradient()](#径向渐变 bgi:radial-gradient())
- 总结

学习之前请看我之前发布的文章的 transition属性

01-平面转换

简介

作用：为元素添加动态效果 ，一般与过渡配合使用

概念：改变盒子在平面内的形态（位移、旋转、缩放、倾斜）

平面转换也叫 2D 转换，属性是 transform

平移 transform: translate()

css 复制代码

transform: translate(X轴移动距离, Y轴移动距离);

取值
- 像素单位数值（正负均可）：transform: translate(200px, 100px);
- 百分比（参照盒子自身尺寸 计算结果）(正负均可):
技巧
- translate() 只写一个值 ，表示沿着 X 轴移动
- 单独设置 X 或 Y 轴移动距离：translateX() 或 translateY()

定位居中

方法一：margin

html 复制代码

<style>
    *{
        margin: 0;
        padding: 0;
    }
    body{
        height: 200px;
    }
    .box {
        position: absolute;
        /* 第八章的居中定位已经说明不用相对定位的原因了 */
        left: 50%;
        top: 50%;
        /* 百分比属性 都是相对于父级元素 */
        margin-top: -50px;
        margin-left: -100px;

        width: 200px;
        height: 100px;
        background-color: pink;          
    }
</style>
<div class="box"></div>

方法二：平移 → 百分比参照盒子自身尺寸计算结果

html 复制代码

<style>
    *{
        margin: 0;
        padding: 0;
    }
    body{
        height: 200px;
    }
    .box {
        position: absolute;
        left: 50%;
        top: 50%;
        /* 向左向上移动自身尺寸的一半 */
        transform: translate(-50%, -50%);
        width: 200px;
        height: 100px;
        background-color: pink;          
    }
</style>
<div class="box"></div>

旋转 transform: rotate()

css 复制代码

transform: rotate(旋转角度);

取值：角度单位是 deg
技巧
- 取值正负均可
- 取值为正，顺时针旋转
- 取值为负，逆时针旋转

转换原点 transform-origin:

默认情况下，转换原点是盒子中心点

css 复制代码

transform-origin: 水平原点位置 垂直原点位置;

取值：

方位名词（left、top、right、bottom、center）
像素单位数值
百分比

多重转换

多重转换技巧：先平移再旋转

css 复制代码

transform: translate() rotate();

多重转换原理：以第一种转换方式坐标轴为准转换形态
- 先写旋转，则后面的转换效果的轴向以旋转后的轴向为准，会影响转换结果
  css 复制代码
```
transform: rotate(360deg) translate(600px);
/* 先旋转后平移 */
```
- 有重叠性
  css 复制代码
```
transform: translate(600px);
transform: rotate(360deg);
/* 后者会将前者覆盖 只表现为rotate(360deg) */
```

缩放transform: scale()

css 复制代码

transform: scale(缩放倍数);
transform: scale(X轴缩放倍数, Y轴缩放倍数);

技巧
- 通常，只为 scale() 设置一个值，表示 X 轴和 Y 轴等比例缩放
- 取值大于1表示放大，取值小于1表示缩小

倾斜 transform: skew()

css 复制代码

transform: skew();

取值：角度度数 deg

02-渐变

渐变是多个颜色 逐渐变化的效果，一般用于设置盒子背景

分类：

线性渐变：直线变化

径向渐变：圆形变化

线性渐变 bgi:linear-gradient()

css 复制代码

background-image: linear-gradient(
  渐变方向,
  颜色1 终点位置,
  颜色2 终点位置,
  ......
);

取值：

渐变方向：可选
- to 方位名词
- 角度度数
终点位置：可选
- 百分比

css 复制代码

background-image: linear-gradient(to right,red,green);
background-image: linear-gradient(to bottom,transparent,rgba(0,0,0,0.5));

径向渐变 bgi:radial-gradient()

css 复制代码

background-image: radial-gradient(
  半径 at 圆心位置,
  颜色1 终点位置,
  颜色2 终点位置,
  ......
);

取值：

半径可以是2条，则为椭圆
圆心位置取值：像素单位数值 / 百分比 / 方位名词

打开代码调试一下就理解了，调试的时候选中你要的属性

总结

属性	属性值(函数)	说明
transform(简写tf)	translate(10px,10px)(简写ts)	平移距离
	rotate(deg)(简写ra)	旋转角度
transform-origin（简写tfo）	: 水平原点位置垂直原点位置;	旋转中心点
transform(简写tf)	scale(2)(简写s)	放大缩小
transform(简写tf)	skew(40deg)(简写sk)	倾斜
background-image	linear-gradient()(简写l)	线性渐变
	radial-gradient(3px at center center ,red,pink 50%)	径向渐变