css 变形(transform)

福叔 2020-04-11

1.transform

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title>变形</title>
        <style>
            
            .box1{
                width: 200px;
                height: 200px;
                background-color: #bfa;
                
                /* 
                 
                    变形,通过变形可以对元素进行平移、放大、缩小旋转等操作
                        所有的变形效果,都不会影响页面的布局,这是元素的外观发生变化
                    使用transform 来设置变形的效果
                 */
                /* 
                    平移
                        translateX 沿着x轴平移
                            - 正值元素向右移动,负值向左移动(元素没有发生旋转)
                        translateY 沿着y轴平移
                            - 正值元素向下移动,负值元素向上移动(元素没有发生旋转)
                */
               
               transition: all .2s;
                
            }
            
            .box1:hover{
                /* transform: translateY(-10px); */
                /* box-shadow: rgba(0,0,0,.3) 0 10px 10px; */
                
                /* 平移时百分比的单位是相对于自身进行计算的 */
                transform: translateX(50%);
            }
            
            .box2{
                width: 200px;
                height: 200px;
                background-color: tomato;
            }
            
            
            .box3{
                
                position: absolute;
                background-color: greenyellow;
                
                left: 50%;
                top:50%;
                transform: translateX(-50%) translateY(-50%);
            }
        </style>
    </head>
    <body>
        
        <!-- <div class="box1"></div> -->
        <!-- 
        <div class="box2"></div> -->
        
        <div class="box3">我是一个box3</div>
        
        
    </body>
</html>

相关推荐