CSS平面转换

发布于:2025-04-10 ⋅ 阅读:(28) ⋅ 点赞:(0)


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

01-平面转换

简介

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

概念:改变盒子在平面内的形态(位移、旋转、缩放、倾斜)

在这里插入图片描述

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

平移 transform: translate()

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

定位居中

  • 方法一:margin

    <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>
    
  • 方法二:平移 → 百分比参照盒子自身尺寸计算结果

    <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()

transform: rotate(旋转角度);
  • 取值:角度单位是 deg
  • 技巧
    • 取值正负均可
    • 取值为正,顺时针旋转
    • 取值为负,逆时针旋转

转换原点 transform-origin:

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

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

取值:

  • 方位名词(left、top、right、bottom、center)
  • 像素单位数值
  • 百分比

多重转换

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

transform: translate() rotate();
  • 多重转换原理:以第一种转换方式坐标轴为准转换形态

    • 先写旋转,则后面的转换效果的轴向以旋转后的轴向为准,会影响转换结果

      transform: rotate(360deg) translate(600px);
      /* 先旋转后平移 */
      
    • 有重叠性

      transform: translate(600px);
      transform: rotate(360deg);
      /* 后者会将前者覆盖 只表现为rotate(360deg) */
      

缩放transform: scale()

transform: scale(缩放倍数);
transform: scale(X轴缩放倍数, Y轴缩放倍数);
  • 技巧
    • 通常,只为 scale() 设置一个值,表示 X 轴和 Y 轴等比例缩放
    • 取值大于1表示放大,取值小于1表示缩小

倾斜 transform: skew()

transform: skew();

取值:角度度数 deg

02-渐变

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

分类:

  • 线性渐变:直线变化

在这里插入图片描述

  • 径向渐变:圆形变化

在这里插入图片描述

线性渐变 bgi:linear-gradient()

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

取值:

  • 渐变方向:可选
    • to 方位名词
    • 角度度数
  • 终点位置:可选
    • 百分比
background-image: linear-gradient(to right,red,green);
background-image: linear-gradient(to bottom,transparent,rgba(0,0,0,0.5));

径向渐变 bgi:radial-gradient()

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%) 径向渐变

网站公告

今日签到

点亮在社区的每一天
去签到