CSS3位移,旋转,渐变,缩放

最新推荐文章于 2023-05-22 19:49:17 发布

做梦都在睡

最新推荐文章于 2023-05-22 19:49:17 发布

阅读量701

点赞数 6

文章标签： css3 css html html5

本文链接：https://blog.csdn.net/qq_53791154/article/details/127166838

版权

位移:

transform: translateX() translateY()

属性值可以为百分比和像素单位,

百分比是相对于自己身长而言.

<!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>Document</title>
    <style>
        /* 2d位移就是在平面状态下移动盒子 */
        .box {
            width: 200px;
            height: 200px;
            background-color: pink;
            /* 2d位移   transform: translate(x轴,y轴);*/
            /* transform: translate(800px, 400px); */
            /* 单方向x轴 */
            /* transform: translateX(800px); */
            /* 单方向y轴 */
            /* transform: translateY(400px); */
            transform: translateX(800px) translateY(400px);
        }
    </style>
</head>

<body>
    <div class="box"></div>
</body>

</html>

旋转:

transform: rotate();

属性的值有两种单位:

deg表示度,正值表示顺时针,逆值表示逆时针

turn表示周数,1turn为一周

<!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>Document</title>
    <style>
        .box {
            width: 200px;
            height: 200px;
            background-color: pink;
            margin: 0 auto;
            text-align: center;
        }

        .box img {
            transition: all 1s;
        }

        .box:hover img {
            /* 旋转  单位 deg度   turn一圈*/
            /* transform: rotate(99turn); */
            transform: rotate(-720deg);

            /* 正值代表顺时针  负值代表逆时针 */
        }
    </style>
</head>

<body>
    <div class="box">
        <img src="./images/p4-tx3.png" alt="">
    </div>
</body>

</html>

位移旋转连写

位移和旋转是可以连写的

这里要注意的是,必须先写位移,再写旋转属性,当然,反过来写会发生贼有意思的事情

缩放

transform: scale()

值填倍数

tips:记得添加overflow: hidden;防止图片溢出

<!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>Document</title>
    <style>
        .box {
            width: 200px;
            height: 200px;
            background-color: red;
            margin: 200px auto;
            transition: all 2s;
        }

        .box:hover {
            /* 缩放 scale(缩放的倍数)  1以上放大 1以下缩小*/
            transform: scale(3);
        }

        .one {
            width: 399px;
            height: 300px;
            /* 溢出隐藏,防止图片放大 */
            overflow: hidden;
        }

        .one img {
            width: 100%;
            height: 100%;
            transition: all 2s;
        }

        .one img:hover {
            /* 图片放大1.5倍 */
            transform: scale(1.5);
        }
    </style>
</head>

<body>
    <!-- <div class="box">
    </div> -->


    <div class="one">
        <img src="./images/huawei.jpg" alt="">
    </div>


</body>

</html>

渐变

属性是

background-image: linear-gradient()

值有几种写法

偷懒的可以用to＋方位词

常用的transparent加上rgba

一般用来在所放在缩放的图片上显示文字,看起来美观

<!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>Document</title>
    <style>
        .box {
            width: 400px;
            height: 400px;
            /* linear-gradient线性渐变(颜色1,颜色2....) */
            /* background-image: linear-gradient(red, blue, yellow); */

            /* to(到哪里去...)属性 改变渐变色的方向   */
            background-image: linear-gradient(to right, red, blue, yellow);

            /* 不能使用to属性,换成deg */
            background-image: linear-gradient(45deg, red, blue, yellow);

            /* 几个常用的背景色 */
            /* 透明色到黑色半透明 */
            background-image: linear-gradient(transparent, rgba(0, 0, 0, 0.5));

            /* 透明色到白色半透明 */
            background-image: linear-gradient(transparent, rgba(255, 255, 255, 0.5));
        }

        /* 注意点: 
        1.渐变色他是使用背景图的写法
        2.渐变色是多个颜色组成
        3.渐变色的颜色组成,角度后面有ui设计师提供
        */
    </style>
</head>

<body>
    <div class="box"></div>
</body>

</html>