transform的基本使用

<!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>
``
transform的基本使用

猜你喜欢
