7：---（3）CSS3中的变形--缩放 scale()

来源：互联网发布：2017程序员猝死编辑：程序博客网时间：2024/05/24 04:24

CSS3中的变形--缩放 scale()

缩放 scale()函数让元素根据中心原点对对象进行缩放。

缩放 scale 具有三种情况：

1、 scale(X,Y)使元素水平方向和垂直方向同时缩放（也就是X轴和Y轴同时缩放）

例如：

div:hover {

-webkit-transform: scale(1.5,0.5);

-moz-transform:scale(1.5,0.5)

transform:scale(1.5,0.5);

}

注意：Y是一个可选参数，如果没有设置Y值，则表示X，Y两个方向的缩放倍数是一样的。

2、scaleX(x)元素仅水平方向缩放（X轴缩放）

3、scaleY(y)元素仅垂直方向缩放（Y轴缩放）

.wrapper {

width:200px;

height:200px;

border:2pxdashed red;

margin: 0auto;

}

.wrapper div {

width:200px;

height:200px;

line-height: 200px;

background:orange;

text-align:center;

color:#fff;

}

.wrapper div:hover {

opacity:.5;

-webkit-transform: scale(1.5);

-moz-transform:scale(1.5)

transform:scale(1.5);

}

***相关代码

<!DOCTYPE html><html lang="en"><head>    <meta charset="UTF-8">    <title>Document</title></head><style>    div {        width: 200px;        height: 200px;    }        .div1 {        background-color: aquamarine;    }        .div2 {        background-color: red;        transform: scale(2, 1);    }        .div3 {        background-color: red;        transform: scale(2);    }        .div4 {        background-color: yellowgreen;        transform: scale(2, 3);    }</style><body>    <div class="div1">正常状态</div>    <div class="div2">x轴缩放状态</div>    <div class="div3">y轴缩放状态</div>    <div class="div4">x,y轴缩放状态</div></body></html>

***相关效果

阅读全文

0 0