transform的基本使用

最新推荐文章于 2024-05-28 17:10:06 发布

恬一

最新推荐文章于 2024-05-28 17:10:06 发布

阅读量330

点赞数

分类专栏：李立超前端学习 css

本文链接：https://blog.csdn.net/weixin_44158539/article/details/113315761

版权

前端学习同时被 3 个专栏收录

39 篇文章 0 订阅

订阅专栏

李立超

32 篇文章 1 订阅

订阅专栏

css

2 篇文章 0 订阅

订阅专栏

本文介绍了CSS transform属性的基本用法，包括translate、rotate、scale和skew等变换函数的详细解释和实例演示，帮助读者理解如何在网页布局中实现元素的位置、尺寸和旋转等视觉效果。

摘要由CSDN通过智能技术生成

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        .box1{
            width:200px;
            height:200px;
            background-color:rgb(57, 241, 11);
            margin:0 auto;
            margin-top:100px;
            /*
               变形是指通过css来改变元素的形状或位置
                   变形不会影响到页面的布局
                transform用来设置元素变形的效果
                   -平移：
                      translateX()  沿着x轴方向平移
                      translateY()  沿着y轴方向平移
                      translateZ()  沿着z轴方向平移
                         -平移元素，百分比是相对于自身计算的
            */
            transform:translateZ(100px);

        }
        .box2{
            width:200px;
            height:200px;
            background-color:rgb(241, 115, 11);
            margin:0 auto;
        }
        .box3{  
            background-color:rgb(238, 81, 212);
            position:absolute;
            left:50%;
            top:50%;
            transform:translateX(-50%) translateY(-50%);
            /*
              这种居中方式，只适用于元素的大小确定
               
               width:100px;
               height:100px;
               top:0;
               left:0;
               margin:auto;
            */
        }
        .box4,.box5{
            width:200px;
            height:300px;
            background-color:rgb(131, 226, 226);
            float:left;
            margin:0 10px;
            /* transition:transform .3s; */
        }
        .box4:hover{/* box4点击有阴影效果 */
            transform:translateY(-3px);
            box-shadow:0 0 10px rgba(0,0,0,.3);

        }
    </style>
</head>
<body>
    <div class="box1"></div>
    <div class="box2"></div>
    <div class="box3">aaaa</div>
    <div class="box4"></div>
    <div class="box5"></div>
</body>
</html>
``