移动web day1 | 平面转换、渐变

csyldjy

已于 2022-05-15 15:24:02 修改

阅读量86

点赞数

分类专栏：前端文章标签： css3 css html5

于 2022-05-12 21:40:30 首次发布

本文链接：https://blog.csdn.net/csyldjy/article/details/124724389

版权

前端专栏收录该内容

31 篇文章 1 订阅

订阅专栏

8.1 行内元素不能使用转换属性(可在转模式后使用)

8.2 百分比的问题

8.3 相对定位和位移的异同点

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

平面转换

Ø 改变盒子在平面内的形态（位移、旋转、缩放）

Ø 2D转换

平面转换属性

Ø transform

1 位移

目标：使用translate实现元素位移效果

语法

选择器 {
     /* 记住小括号里多个值是用英文,分割的 */
    transform: translate(水平移动距离, 垂直移动距离);
}

取值（正负均可）

Ø 像素单位数值

Ø 百分比（参照物为盒子自身尺寸）

注意：X轴正向为右，Y轴正向为下

技巧

Ø translate()如果只给出一个值, 表示x轴方向移动距离

Ø 单独设置某个方向的移动距离：translateX() & translateY()

2 位移-绝对定位居中

目标：使用translate快速实现绝对定位的元素居中效果

先看两种原先做法:

原法一:

            position: absolute;
            top: 50%;
            left: 50%;
            width: 200px;
            height: 200px;
            margin-top: -100px;
            margin-left: -100px;

原法二:

            position: absolute;
            width: 200px;
            height: 200px;
            top: 0;
            bottom: 0;
            left: 0;
            right: 0;
            margin: auto;

法三 (translate):

        .box {
            position: absolute;
            background-color: yellowgreen;
            top: 50%;
            left: 50%;
            /* 原理相似,记得加- */
            /* 平移数值用百分比时,依据盒子自身大小计算移动距离 */
            transform: translate(-50%, -50%);
        }

优点:

当不设置盒子宽高时也能居中(内容撑开);
不用计算(盒子大小的一半)

3 旋转 rotate

目标：使用rotate实现元素旋转效果

语法

Ø transform: rotate(角度);

注意：角度单位是deg

技巧：取值正负均可

Ø 取值为正, 则顺时针旋转

Ø 取值为负, 则逆时针旋转

4 转换原点

目标：使用transform-origin属性改变转换原点(默认圆点是盒子中心点)

语法

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

取值

            /* 两值(x轴 y轴) */
            /* 只写一值 另外一值默认center*/
            /* 1 像素值 */
            transform-origin: 5px 600px ;
            /* 2 百分比 (参考盒子自身宽高)*/
            transform-origin: 20% 20%;
            /* 3 方位名词 */
            transform-origin: right bottom;

5 多重转换

1 目标：使用transform复合属性实现多形态转换

2 语法

   transform: translate(900px) rotate(1080deg);

3 注意

该写法为复合写法,分开写会被重叠
先平移后旋转,否则旋转后影响坐标轴向,影响与平移的呈现效果

6 缩放

目标：使用scale改变元素的尺寸

思考: 改变元素的width或height属性能实现吗？
语法
```
transform:scale(1.5,0.5)
```
注意:
- 一值默认等比例缩放; 二值(x轴,y轴)
- scale值大于1表示放大, scale值小于1表示缩小

案例:

7 渐变背景

1 目标：使用background-image属性实现渐变背景效果

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

2 透明效果:

  background-image: linear-gradient(to right, transparent, rgba(0, 0, 0, .3));

3 方向设置

/* 方位(加to) */
{background-image: linear-gradient(to right top, green, yellowgreen, blue);
/* 角度 90度意为to right*/
{background-image: linear-gradient(67deg, aquamarine, gray);