1、scale(x,y)对元素进行缩放X表示水平方向缩放的倍数|Y表示垂直方向的缩放倍数Y是一个可选参数,没有设置的话,则表示X,Y两个方向的缩放倍数是一样的。并以X为准。transform:scale(2,2.5)
2、scaleX()元素只在X轴(水平方向)缩放元素。默认值是1,基点一样在元素的中心位置。可以通过transform-origin来改变基点transform:scaleX(2)
3、scaleY()元素只在Y轴(垂直方向)缩放元素。基点一样在元素的中心位置。可以通过transform-origin来改变基点。transform:scaleY(2)
最后我们看看兼容性写法:
代码如下:
.test{
-moz-transform:scale(2,2)
-webkit-transform:scale(2,2)
-o-transform:scale(2,2)
background:url(img/i.png)no-repeat
width:198px
height:133px
}
一、scale()方法
缩放,指的是“缩小”和“放大”。在CSS3中,我们可以使用scale()方法来将元素根据中心原点进行缩放。
跟translate()方法一样,缩放scale()方法也有3种情况:
(1)scaleX(x):元素仅水平方向缩放(X轴缩放);
(2)scaleY(y):元素仅垂直方向缩放(Y轴缩放);
(3)scale(x,y):元素水平方向和垂直方向同时缩放(X轴和Y轴同时缩放);
scale有2个参数。
css样式:
.dot_ac {
animation: scale2 1.5s forwards
}
@keyframes scale2 {
0% {
background-color: #E5E5E5
transform: scale(1)
opacity: 0.9
}
100% {
background-color: #E8B960
transform: scale(1.5)
opacity: 1
}
}
.dot {
display: inline-block
width: 0.32rem
height: 0.32rem
background: #E5E5E5
border-radius: 50%
line-height: 0.8rem
position: absolute
left: 0.10666667rem
top: 50%
margin-top: -0.16rem
}
html:
<ul>
<li class="active">
<div class="ces_inner">
<div class="dot"></div>
<span class="font-bold">基本信息</span>
</div>
</li>
<li>
<div class="ces_inner">
<div class="dot"></div>
<span class="font-bold">商业模式评估</span>
</div>
</li>
<li>
<div class="ces_inner">
<div class="dot"></div>
<span class="font-bold">营销品牌评估</span>
</div>
</li>
</ul>
实现圆点由小变大,颜色变化功能