css3-2d变换旋转等属性

逃离我推掉我的手 2022-07-14 00:42 174阅读 0赞

<!DOCTYPE html>
    <html>
    <head lang="en">
        <meta charset="UTF-8">
        <title></title>
        <style>
    /*--------------------------------2d变换 之 缩放 scale-----------------------------------*/
    
                /*.box .box2:hover{*/
                    /*background-color: blue;*/
    
                    /*/!* transform:  css3中用于做变换的属性*/
                        /*scale：放缩*/
                        /*取值：大于1 放大  小于1缩小  不能为百分比*/
                        /*scale(x,y)*/
                        /*x：水平放缩倍数*/
                        /*y:垂直方向的放缩倍数*/
                        /*如果只写一个值就是等比例缩放e*/
                    /**!/*/
                    /*transform: scale(-1,-1);*/
                /*}*/
    
    /*-------------------------------位移属性-----------------------------------*/
                /*.box .box2:hover{*/
                    /*background-color: pink;*/
                    /*/!* 过渡*!/*/
                    /*transition:all 1s;*/
                    /*/!*变换*!/*/
                    /*/!* transform:*/
                    /*translate()*/
                        /*让盒子发生位移，*/
                        /*translate(x) ：一个值 水平方向位移，竖直方向不变*/
                        /*tarnslate(x,y): x:水平方向上的位移，y 竖直方向上的位移*/
                        /*x，y 可以为正也可以为负*/
                            /*为正：向下 向右移动*/
                            /*为负：向上 向左移动*/
                /**/
                        /*取值可以为百分比，百分比以自身宽度为参考*/
                /**/
                    /**!/*/
                    /*transform:translate(50%);*/
                /*}*/
    
    /*----------------------------------旋转属性-------------------------------*/
                /* transform:
                rotate() 旋转
                deg：角度
                正值：顺时针旋转
                负值：逆时针旋转
                */
    
                /*.box .box2:hover{*/
                    /*transform:rotate(-720deg);*/
                /*}*/
    
        </style>
    </head>
    <body>
    
    </body>
    </html>