二、2前端进阶（HTML5、css3)之平面转换transform

最新推荐文章于 2024-08-14 21:15:03 发布

一束光亮

最新推荐文章于 2024-08-14 21:15:03 发布

阅读量182

点赞数

分类专栏：前端第一阶段：html5css3，移动端、网页布局文章标签： css3 前端 html5

本文链接：https://blog.csdn.net/m0_52766105/article/details/127459637

版权

前端第一阶段：html5css3，移动端、网页布局专栏收录该内容

26 篇文章 0 订阅

订阅专栏

文章目录

平面转换transform

平面转换transform

使用 transform 实现位移、旋转、缩放等效果

平面坐标

   -y
-x  0  +x
   +y

位移translate

语法

transform: translate(水平移动距离，垂直移动距离);

取值

正负均可
像素单位数值
百分比（参照盒子自身大小）

配合过渡使用(过渡效果要加在自身上，不是父级，也不是伪元素内部)

transition: all 0.5s;

示例：(元素居中效果)

具体使用细节看注释说明：

<style>
    .wrap {
        width: 500px;
        height: 200px;
        border: 1px solid #333;
        position: relative;
    }

    .box {
        left: 0;
        top: 0;

        width: 100px;
        height: 100px;
        background-color: skyblue;
        position: absolute;
        /*1. 过渡 （放自身）*/
        transition: all 0.5s;

    }

    /*2.理解hover 鼠标移入wrap后,box盒子改变位置（移动） */
    .wrap:hover .box {
        top: 50%;
        left: 50%;

        /*3.居中的方法之一 替换：margin-left: -50px; margin-top: -50px */
        /*4. 如果是百分比，则参考自身尺寸移动*/
        transform: translate(-50%, -50%);/* 向左向上移动自身尺寸的一半 */
    }
</style>

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

技巧

translate（移动）只给一个值，表示 x 轴方向移动距离
单独设置某个方向的移动：translateX(), translateY()

/* 背景图从右显示 */
background-position: right 0;

示例：双开门

<!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>
        * {
            margin: 0;
            padding: 0;
        }
        .box{
            width: 1366px;
            height: 600px;
            margin: 30px auto;
            background-image: url(./images-02/bg.jpg);
            /*1. 超出父级的要隐藏 */
            overflow: hidden;
        }
        /*2.父子集：两个div或者两个伪元素（高级点），也能三个兄弟并集 */
        .box::before,
        .box::after{
            content: '';
            float: left;
            width: 50%;
            height:100%;
            /* 4过渡的写法不熟练 */
            transition: all .5s;
            background-image: url(./images-02/fm.jpg);
           
        }
        .box::after {
            /* 5.单独控制after的背景图 ，只取精灵图右边的*/
        background-position: right 0;
        transform: -50%;
        }
        /*6. 伪元素配合移动 */
        .box:hover::before{
            /*7. 移动是以自身尺度为标准 */
         transform: translate(-100%);
        }
        .box:hover::after{
            transform: translateX(100%);
        }
    </style>
</head>
<body>
    <div class="box">
       
    </div>
</body>
</html>

旋转rotato

语法

transform: rotate(角度);

角度单位deg, 正负数均可

正数：顺时针
负数：逆时针

示例：

<style>
    .box {
        margin: 0 auto;
        width: 50px;
        height: 50px;
        background-color: skyblue;
        transition: all 0.5s;

    }

    .box:hover {
        /* 顺时针旋转360度 */
        transform: rotate(360deg);
    }
</style>


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

改变转换原点transform-origin

默认的旋转原点是盒子中心点

语法

transform-origin 原点水平位置, 原点垂直位置;

取值

方位名词 top left right bottom center
像素单位数值
百分比（参照盒子自身尺寸）

示例：

<style>
    .box {
        margin: 0 auto;
        width: 50px;
        height: 50px;
        background-color: skyblue;
        transition: all 0.5s;

        /* 改变旋转中心点(盒子right边框线与bottom边框线相交的点) */
        transform-origin: right bottom;
    }

    .box:hover {
        /* 顺时针旋转360度 */
        transform: rotate(360deg);
    }
</style>


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

多重转换

/* 复合属性 先后顺序不一样，效果也不一样 */
transform: translate() rotate();

示例：边走边转（整体是在往右走的）

<style>
    .wrap {
        width: 600px;
        height: 200px;
        border: 1px solid #666;
        margin: 0 auto;

    }

    .box {
        height: 200px;
        width: 200px;
        background-color: skyblue;

        border-radius: 50%;
       
        position: relative;
        overflow: hidden;
        transition: all 3s;
    }

    .box::before {
        position: absolute;

        content: '';
        width: 200px;
        height: 100px;
        background-color: yellow;
    }

    .wrap:hover .box {
        /* 旋转会改变坐标轴向，如果将rotate写在translate前面，整体表现为在旋转转大圈的，可以运行代码看看效果 */
        transform: translate(400px) rotate(360deg);
    }
</style>

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

缩放scale

实现元素从中心点缩放效果

语法

transform: scale(x轴缩放倍数, y轴缩放倍数);

/* x、y等比例缩放 */
transform: scale(缩放倍数);

效果	取值	示例
放大	数值>1	scale(1.2)
不变	数值=1	scale(1)
缩小	数值<1	scale(0.8)

示例-和平精英：

<!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>
        *{
            margin:0;
            padding: 0;
        }
        li{
            list-style: none;
        }
        /*1. 使图片达到父级的盒子大小，固定宽，高自动等比例缩放 */
        img{
            width: 100%;
        }
        .box{
            width: 220px;
            height:220px;
            margin: 20px auto;
        }
        .box .pic{
            position: relative;
           overflow: hidden;
           
        }
        /*2. 伪元素是行内，宽高不生效，但是这里用了子绝父相，变为了行块级模式 */
        .box .pic::after{ 
           content: ' ';
            position: absolute;
            background-image: url(./images-03/play.png);
            width: 58px;
            height: 58px;
            /* 以父级盒子尺寸为标准 */
            top: 50%;
            left: 50%;

            /* 以自身尺寸为标准 */

            /* 第一种调整子绝父相方法图片不在中心情况：使用margin */
            /* margin-top: -29px;
            margin-left: -29px; */

            /* 第二种调整子绝父相方法图片不在中心情况：使用过渡 
            后面如果还有trasition属性就合并，不然会产生层叠效果*/
            transform: translate(-50% ,-50%)  scale(1)  ;
            opacity: 0; 

            /* 过渡要放在自身上，不是父级（pic) */
            transition: all .5s;
        }
        .box li:hover .pic::after{
            /* 这里伪元素，格式要与上面一样，才不会产生层叠效果 */
            transform:translate(-50%, -50%) scale(5);
            opacity: 1;
        }
    </style>
</head>
<body>
    <div class="box">
         <ul>
        <li>
            <!-- 不能用img作为父级来定位，它不是一个盒子，只是个图片：即把pic写在img里面不生效，
            必须用个盒子来把img装起来，来实现里面的小图片定位 -->
           <div class="pic"><img src="./images-03/party.jpeg " alt="" ></div> 
            <p>【和平精英】“初火”音乐概念片：四圣觉醒......</p>
        </li>
    </ul>
    </div>
   
</body>
</html>

渐变背景background-image

示例 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>
      *{
        margin: 0;
        padding: 0;
      }
        .box {
            margin: 20px auto;
            position: relative;
            width: 300px;
            height: 212px;
           
        }
        
        .box img {
            width: 300px;
        }
        
        .box .title {
            position: absolute;
            left: 15px;
            bottom: 20px;
            z-index: 2;
            width: 260px;
            color: #fff;
            font-size: 20px;
            font-weight: 700;
        }
        .mask{
            position: absolute;
            top: 0;
            left: 0;
            width:300px ;
            height: 212px;
            /* transparent:透明 */
            /* 这句话意思是透明到黑色的半透明 */
            background-image: linear-gradient(transparent,rgba(0,0,0, .5));
            opacity: 0;
            transition: all .5s;
        }
        .box:hover .mask{
            opacity: 1;
        }
    </style>
</head>

<body>

    <div class="box">
        <img src="./images-04/product.jpeg" alt="">
        <div class="title">OceanStor Pacific 海量存储斩获2021 Interop金奖</div>
        <!-- 1.准备盒子 -->
        <!-- 2.定位盒子 -->
        <!-- 3.mask遮罩层 -->
       <div class="mask"></div>
    </div>
</body>

</html>