css3-2d变换旋转等属性

最新推荐文章于 2021-01-07 13:31:14 发布

约德尔蒙

最新推荐文章于 2021-01-07 13:31:14 发布

阅读量504

点赞数

分类专栏： CSS3

本文链接：https://blog.csdn.net/gyq04551/article/details/53263725

版权

CSS3 专栏收录该内容

15 篇文章 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>

约德尔蒙

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
css3-2d变换旋转等属性

/*--------------------------------2d变换之缩放 scale-----------------------------------*/ /*.box .box2:hover{*/ /*background-color: blue;*/ /*/!* transform:
复制链接

扫一扫