CSS巩固复习6-平面变换

CSS

平面转换transform

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

平面转换又叫做2D转换

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

image

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        div{
            margin: 100px 0;
            width: 100px;
            height: 100px;
            background-color: pink;
            transition: all 1s;
        }
        /*鼠标滑过添加动态效果*/
        div:hover{
            transform: translate(800px) rotate(360deg) scale(2) skew(180deg);
            /*元素向右移动800px 旋转360度 变为原来的2倍 倾斜180度*/
        }
    </style>
</head>
<body>
    <div>

    </div>
</body>
</html>

平移

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

可以只写一个值表示沿着X轴移动

单独设置X或Y轴移动距离： translateX() 或 translateY()

取值：

  • 像素单位数值

  • 百分比（参照盒子自身尺寸计算）

  • 正负均可


实现居中

定位=》整体偏移=》左上角偏移

  • 定位：

    position:absolute;
left:50%
top:50%;
/*margin*/
margin-left:-100px;
margin-top:-50px;

width:200px;
height:100px;

  • 平移

    position:absolute;
left:50%;
top:50%;
transform:translate(-50%,-50%);

    ​

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        .father{
            position: absolute;
            top: 50%;
            left: 50%;
            width: 500px;
            height: 300px;
            background-color: pink;
            transform: translate(-50%,-50%);
        }
    </style>
</head>
<body>
<div class="father">

</div>
</body>
</html>

image


案例-双开门效果

  1. 布局：父级是地下的大图；子级是上面的左右两个小图

  2. 设置鼠标悬停效果：子级分别左右移动

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        *{
            margin: 0;
            padding: 0;
        }
        .father{
            display: flex;
            margin: 0 auto;
            width: 1366px;
            height: 600px;
            background: url(./Car1.png) no-repeat;
            background-size: cover;
            overflow: hidden;
        }

        .father .left,
        .father .right{
            transition: all 1s;
            width: 50%;
            height: 600px;
            background: url("./Car2.png");
            background-size: cover;
        }
        .father .right{
            background-position: right 0;              /* 只需要右半部分时*/
        }
        .father:hover .left{
            transform: translateX(-100%);
        }
        .father:hover .right{
            transform: translateX(100%);
        }
    </style>
</head>
<body>
<div class="father">

    <div class="left">
    </div>
    <div class="right">
    </div>
</div>
</body>
</html>

image


旋转

transform:rotate(旋转角度)

角度单位是deg

取值：

  • 正负均可

  • 正为顺时针旋转

  • 负为逆时针旋转

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        img{
            width: 200px;
            transition: all .5s;
        }
        img:hover{
            transform: rotate(360deg);
        }
    </style>
</head>
<body>
<img src="./wind.png" alt="">
</body>
</html>

image


改变旋转中心点

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

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

取值：

  • 方位名词：left、top、right、bottom、center

  • 像素单位数值

  • 百分比

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        img{
            width: 200px;
            transition: all .5s;
            border: 1px solid black;
            transform-origin: right bottom;        /*绕着右下角的点进行旋转*/
        }
        img:hover{
            transform: rotate(360deg);
        }
    </style>
</head>
<body>
<img src="./wind.png" alt="">
</body>
</html>

image


案例-时钟

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        div{
            margin: 100px auto;
            width: 200px;
            height: 200px;
            background-image: url("./clock.png");
        }
        img{
            transition: all 1s;
            transform-origin: center center;
        }
        div:hover img{
            transform: rotate(360deg);
        }
    </style>
</head>
<body>
<div>
    <img src="./second.png" alt="">
</div>
</body>
</html>

image


多重转换

先平移再旋转

transform:translate() rotate();

先旋转再平移会改变坐标轴向，因此多重转换会以第一种转换形态的坐标轴为准

多重转换只能复合书写不能拆开，否则前面一个会被后一个覆盖（层叠性）

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        div{
            margin: 100px auto;
            width: 1000px;
            height: 200px;
            border: 1px solid black;
        }
        img{
            transition: all .5s;
        }
        div:hover img{
            transform: translateX(800px) rotate(360deg);
        }
    </style>
</head>
<body>
<div>
    <img src="./tyre.png" alt="">
</div>
</body>
</html>

image


缩放

改变元素的width和height属性实现的缩放是从左上角开始缩放

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        div{
            margin: 100px auto;
            width: 1000px;
            height: 800px;
            overflow: hidden;
        }
        img{
            width: 100%;
            height: 100%;
            background-size: cover;
            transition: all .5s;
        }
        div:hover img{
            width: 1200px;
            height: 1000px;
        }
    </style>
</head>
<body>
<div>
    <img src="./show.jpg" alt="">
</div>
</body>
</html>

image


transfor:scale()可以实现从中心开始向四周缩放

属性：

transform:scale(缩放倍数); 一个值表示XY轴等比例缩放

transform:scale(X轴缩放倍数，Y轴缩放倍数)；

取值大于1表示放大，小于1表示缩小，0会缩小至看不见

如果取值为负数为导致图片颠倒

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        div{
            margin: 100px auto;
            width: 1000px;
            height: 800px;
            overflow: hidden;
        }
        img{
            width: 100%;
            height: 100%;
            background-size: cover;
            transition: all .5s;
        }
        div:hover img{
            transform: scale(2);
        }
    </style>
</head>
<body>
<div>
    <img src="./show.jpg" alt="">
</div>
</body>
</html>

image


案例-播放特效

  1. 插入图片在正确位置

  2. 摆放播放按钮至图片中间

  3. hover效果：大按钮，看不见（透明度0）=》小按钮=》看得见（透明度1）

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        div{
            position: relative;
            margin: 100px auto;
            width: 1000px;
            height: 600px;
            background-image: url(./sige.jpg);
            background-size: cover;
        }
        .pic{
            position: absolute;
            top: 50%;
            left: 50%;
            transform: translate(-50%,-50%) scale(3);
            opacity: 0;
            transition: all .5s;
        }
        div:hover .pic{
            transform: translate(-50%,-50%) scale(1);
            opacity: 1;
        }
    </style>
</head>
<body>
<div>
    <img src="./start.png" alt="" class="pic">

</div>


</body>
</html>

image


倾斜

属性： transform:skew();

取值：角度度数deg

  • 取值为正数：向左倾斜

  • 取值为负数：向右倾斜

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
       div{
           margin: 100px auto;
           width: 100px;
           height: 200px;
           background-color: pink;
           transition: all 0.5s;
       }
        div:hover{
            transform: skew(-30deg);
        }
    </style>
</head>
<body>
<div>

</div>


</body>
</html>

渐变

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


线性渐变

image

属性：

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

位置可省略，多个颜色间使用逗号隔开

渐变方向：可选 不加方向默认从上到下

  • to 方位名词

  • 角度度数

终点位置： 不加默认从中间开始渐变

  • 百分比
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
       div{
           width: 200px;
           height: 200px;
           background-color: green;
           background-image: linear-gradient(
           red,
           green
           );
       }
    </style>
</head>
<body>
<div>

</div>


</body>
</html>

image


<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        div{
            transition: all 0.5s;
            margin: 100px auto;
            width: 1000px;
            height: 600px;
            background-image: url(./sige.jpg);
            background-size: cover;
        }
        div:hover .mask{
            opacity: 1;
        }
        .mask{
            width: 100%;
            height: 100%;
            background-image: linear-gradient(transparent,rgba(0,0,0,0.6));
            opacity: 0;
        }
    </style>
</head>
<body>
<div>
    <div class="mask"></div>
</div>

</body>
</html>

image


径向渐变

image

通常用于按钮添加高光效果

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

半径可以写2条，则为椭圆

圆心位置取值：

  • 像素单位数值

  • 百分比

  • 方位名词

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        div{
            width: 100px;
            height: 100px;
            background-color: pink;
            border-radius: 50%;
            background-image: radial-gradient(
            50px at center center,
            red,
            pink
            );
        }
        button{
            width: 100px;
            height: 40px;
            background-color: green;
            border: 0;
            border-radius: 5px;
            color: white;
            background-image: radial-gradient(
            30px at 30px 20px,
            rgba(255,255,255,0.2),
            transparent
            );
        }
    </style>
</head>
<body>
<div>
</div>

<button>按钮</button>

</body>
</html>

image


按钮渐变

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        /* 线性渐变 */
        .login{
            width: 100px;
            height: 40px;
            background-color: #f86442;
            border: 0;
            border-radius: 30px;
            color: white;
            background-image: linear-gradient(
            to right,
            rgba(255,255,255,0.3),
            #f86442
            );
        }
        /* 径向渐变 */
        .btn{
            width: 100px;
            height: 40px;
            background-color: skyblue;
            border: 0;
            border-radius: 30px;
            color: white;
            background-image: radial-gradient(
                90px at 5px 5px,
                rgba(255,255,255,0.3),
                transparent
            );
        }
    </style>
</head>
<body>
<div>
</div>

<button class="login">登录</button>
<br>
<br>
<br>
<button class="btn">登录</button>

</body>
</html>

轮播图区域设置

所有图片都重叠在一起，通过transform改变图片的位置并且scale缩小图片，但是由于缩小了以后左侧位置也会发生变化，因此还需要更改图片转换的中心


猜你喜欢区域

当鼠标悬停时图片会放大，出现播放按钮，背景图片颜色变深（遮罩）

遮罩使用伪元素添加：xxx ::after{ content=' '} 子绝父相

posted @ 2024-10-23 22:45  原语  阅读(34)  评论(0)    收藏  举报