css平面转换的使用

黄昏终结者

已于 2022-08-27 09:14:13 修改

阅读量212

点赞数

文章标签：前端 html css3 css javascript

于 2022-04-19 10:15:00 首次发布

本文链接：https://blog.csdn.net/m0_62181310/article/details/124174495

版权

使用位移、缩放、旋转、渐变效果丰富网页呈现方式

使用位移、缩放、旋转、渐变效果丰富网页呈现方式

一、平面:x和y 2条坐标轴组成的屏幕

x轴正值向右
y轴正值向下

二、转换:

改变盒子形态:位置角度大小

三、属性:transform

四、位移

translate(x,y)

translateX()
translateY()

值:

px
百分比: 参照盒子自身的尺寸计算
负数：移动方向水平是向左侧，垂直是向上
只改变某个方向的位置

[transform: translate(100px);]、[transform: translateX(100px);]、[transform: translateY(100px);]

鼠标移入到父盒子，子盒子改变自身位置的位移效果展示:

代码:

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>位移</title>
    <style>
        .father {
            width: 500px;
            height: 300px;
            margin: 100px auto;
            border: 1px solid #000;
        }
        
        .son {
            width: 200px;
            height: 100px;
            background-color: pink;
            transition: all 0.5s;
        }

        .father:hover .son {
            transform: translate(100px,50px);

            transform: translate(-50%,-100px);

            transform: translate(-50%,100%);

            transform: translate(100px);

            transform: translateY(100px);

            transform: translateX(100px);
        }
    </style>
</head>

<body>
    <div class="father">
        <div class="son"></div>
    </div>
</body>

</html>

五、绝对定位盒子居中

位移:百分比参考盒子自身尺寸计算结果

值:translate(-50%,-50%)

left:50% top:50%

transform: translate(-50%,-50%);

效果:

代码

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>绝对定位元素居中效果</title>
    <style>
        .father {
            position: relative;
            width: 500px;
            height: 300px;
            margin: 100px auto;
            border: 1px solid #000;
        }
        
        .son {
            position: absolute;
            left: 50%;
            top: 50%;

            transform: translate(-50%,-50%);

            width: 200px;
            height: 100px;
            background-color: pink;          
        }
    </style>
</head>
<body>
    <div class="father">
        <div class="son"></div>
    </div>
</body>
</html>

六、旋转

transform: rotate();

rotate(角度)

单位:deg

旋转方向:正值:顺时针负值:逆时针

鼠标悬停的时候图片进行旋转效果:

代码:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>旋转效果</title>
    <style>
        img {
            width: 250px;
            transition: all 2s;
        }
        
        img:hover {
            transform: rotate(360deg);
            transform: rotate(-360deg);
        }
    </style>
</head>
<body>
    <img src="./images/rotate.png" alt="">
</body>
</html>

七、转换中心点

属性:transform-origin

取值:

关键词:top bottom center left right 百分比 px

transform-origin: right bottom;

效果:

代码:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>转换原点</title>
    <style>
        img {
            width: 250px;
            border: 1px solid #000;
            transition: all 2s;
            transform-origin: right bottom;
            transform-origin: top right;
        }
        
        img:hover {
            transform: rotate(360deg);
        }
    </style>
</head>
<body>
    <img src="./images/rotate.png" alt="">
</body>
</html>

八、多重转换

同时改变盒子的多个形态

注:多重转换如果涉及到旋转最后书写(旋转会改变坐标轴向 )

效果:

代码:

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>多重转换</title>
    <style>
        .box {
            width: 800px;
            height: 200px;
            border: 1px solid #000;
        }
        
        img {
            width: 200px;
            transition: all 8s;
        }
        
        .box:hover img {
            transform: translate(600px) rotate(360deg);

            /* 
            transform: translate(600px);
            transform: rotate(360deg); */
        }
    </style>
</head>

<body>
    <div class="box">
        <img src="./images/tyre.png" alt="">
    </div>
</body>

</html>

九、缩放

属性:scale(倍数)

值:大于1,表示放大小于1,表示缩小

效果:

代码:

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>缩放效果</title>
    <style>
        .box {
            width: 300px;
            height: 210px;
            margin: 100px auto;
            background-color: pink;
            
        }

        .box img {
            width: 100%;
            transition: all 0.5s;
        }
        
        .box:hover img {
            /* width: 400px;
            height: 300px; */
            /* 默认 */
            transform: scale(1);
            /* 放大 */
            transform: scale(1.3);
            /* 缩小 */
            transform: scale(0.9);
        }
    </style>
</head>

<body>
    <div class="box">
        <img src="./images/product.jpeg" alt="">
    </div>
</body>

</html>