0
点赞
收藏
分享

微信扫一扫

电脑解锁后黑屏有鼠标--亲测!!不需要重装系统!!

猎书客er 03-10 11:30 阅读 3
html前端

2D缩放:scale

scale(x,y)   2D缩放转换,改变元素的宽度和                     高度,值为缩放的倍数。

scaleX(n)    2D缩放转换,改变元素的宽度。

scaleY(n)    2D播放转换,改变元素的高度。

跟前面提到的平移同理,后面这两个只能有一个生效,上面的会被下面的覆盖。

 例:我们随便给个div

<style>

        *{

            margin: 0;

            padding: 0;

        }

    .big{

        width: 100px;

        height: 100px;

        background-color: pink;

        margin: 40px auto;

    }

    .big:hover{

       transform: scale(1,2)

    }

    </style>

</head>

<body>

    <div class="big">

    </div>

33d95d58a2e9417ca3431ee91c1a83d1.png

 

鼠标放置后变化

72db2eb1280f40df929172fed819499b.png

 由此我们可知,scale括号内第一个值规定的是x轴的缩放倍数,第二个值规定的是y轴的缩放倍数,当我们只写一个值的时候宽高同时缩放:

.big:hover{

       transform: scale(2)

    }

28ae1abbed23483a8b20bfcd191a6ca5.png

我们想缩小时,这里以缩小一半为例:

 transform: scale(.5)

9a1ce9c9bf08499eb7a3ca6b6b50462a.png

 只想x/y缩小可以

transform: scaleX(.5)

transform: scaleY(.5)

还可以用它来隐藏元素:transform: scale(0)

缩放以中心为默认原点,可以用跟上一篇旋转相同的方法改变原点:transform-origin: ……

旋转缩放可以组合到一起: transform: scale(2) rotate(45deg) 注意写到相同标签后面不然是不生效的。

2D倾斜:skew---单位是deg(角度)

skew(x-angle,y-angle)  沿x,y轴倾斜。

skewX(angle)                   沿X轴倾斜。

skewY(angle)                   沿y轴倾斜。

例:

 .big:hover{
       transform: skew(10deg,20deg)
    }

e17ac4e5a9dd4e438c02017064ec33e3.png

 

 

举报

相关推荐

0 条评论