1.渐变 2D转换

  1. /* 代码块 */
  2. background-image
  3. /*属性值*/
  4. linear-gradinet()
  1. 写方位名词，to left right top bottom
  2. 可以写多个颜色值，多个颜色用逗号隔开。
  1. background-image: linear-gradient(90deg, red, pink);

2.背景尺寸

  1. /* 控制图片大小 */
  2. /* 背景图片等比例缩放 */
  3. ~~~~代码块~ background-size
  1. 写关键词
    1. contain 背景图片等比例缩放，显示才能完整，有可能铺不满盒子
    2. cover 背景图片等比例缩放，铺满盒子，有可能显示不完整 
      1. background-size: contain;
  1. 写具体的数值
    1. 只写一个值，是背景图片的宽度，高度默认auto，可以省略
    2. 只写2个值，第一个值代表宽度，第二个值代表 高度 
  1. background-size: cover;
  1. 写百分比
    1. 写2个值，第一个值代表宽度，第二个值代表高度
    2. 注意点：百分比是盒子的百分比，不是背景图片的百分比
  1.  background-size: 50% 50%;

3.css 径向渐变~

  1. /*渐变属性*/
  2. background-image
  3. 属性值：
  4. radial-gradinet()
  1. 半径写关键词
    1. circle 正圆的镜像半径
    2. ellipes 默认值，水平半径是盒子宽度的一半，垂直半径是盒子高度的一半
  1. 半径写具体的数值
    1. 第一个的水平半径，第2个是垂直半径
      1. 圆心的位置
        1. 可以写方位值 left right cneter tottom
        2. 可以写具体的值 第1个事距盒子左边的距离，第2个值是距盒子上边的距离

4.1 2d转换-位移

  1. 语法：
  2. transform: translateX(x);
  3. transform: translateY(y);
  4. transform: translate(x,  y);
  1. /*3.写百分比参考自身的宽高，根据父元素没有关系*/
  2. transform: translate(10%, 20%);
  1. 思路
    • 盒子设置绝对定位：left :50% top:50%
    • 使用位移负值，向左向上移动盒子
  1. 技巧原理
    • translate(-50%,-50%)
    • 位置百分比负值表示向左向上移动自身宽度的百分比
  1. .son {
  2.             position: absolute;
  3.             width: 100px;
  4.             height: 100px;
  5.             border: 1px solid #000;
  6.             background-color: orangered;
  7.             left: 50%;
  8.             top: 50%;
  9.     /*位置百分比负值表示向左向上移动自身宽度的百分比*/
  10.             transform: translate(-50%, -50%);
  11.         }

4.2 2D转换-旋转

  1. 语法
    • transform:rotate(角度) ； //单位：deg
  1. 技巧
    • 取值为正，则顺时针旋转
    • 取值为负，则逆时针旋转 
      1. /* transform: rotate(角度) 正值顺时针  负值逆时针 */

  1. 改变旋转中心点

    1. 语法：transform-oraigin: x y;

    2. 取值分类：

      • 关键词 left right top bottom

      • 像素值 

        1. transform-origin: 20px 20px;

      • 百分比 

        1. /*写百分比  参考的是自身宽高的百分比*/
        2. transform-origin: 100% 100%;


        连写

  1. /* 转行连写 */
  2.             transform: translate(0px, 2px) rotate(-135deg);

4.3 —2D转换-缩放

  1. 语法:
  2. transform: scaleX(值);
  3. transform: scaleY(值);
  4. transform: scale(值1,  值2)
  1. 取值：
    • 纯数字，不能为负数
    • 值代表缩放的倍数，所以值大于1表示放大，小于1表示缩小
  1. 改变缩放基准点：
    • 语法：transform-origin: x y;
    • 取值分类：
    • 关键词（x值：left、right、center；y值：top、bottom、 center ）
    • 像素值
    • 百分数

5.1 多重转换

  1. 语法：transform: translate() rotate() scale();
  2. 注意
    1. 旋转可以改变x、y轴的方向，所以translate() rotate() 顺序不能随意换

2D转换总结