CSS3 transform 缩放

1、transform:scale(x,y)

这是一个缩放的transform属性,y值可以省略,如果y值省略的话,那默认就和x值一样。

举例:

<style>
    div{
      width:300px;
      height:300px;
      background-color:#1B9AF7;
      border-radius:10px;
      position:absolute;
      left:100px;
      top:100px;
      transition:all .2s;
    }
    div:hover{
    transform:scale(1.1);
    transition:all .2s;
    }
</style>
<body>
    <div></div>
</body>

这个例子的执行效果就是,当把指针hover到这个div上的时候,那这个div会放大到原来的1.1倍大。相应的,如果把值改为0.5,hover的时候x和y就会缩小到原来的二分之一。

需要注意的是它的transfom-origin是中心点

2、transformX:scale(x);

只缩放X轴上的倍数。

3、transformY:scale(y);
只缩放Y轴上的倍数。

以上的缩放点都是中心点。

最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

推荐阅读更多精彩内容

  • Transform字面上就是变形,改变的意思。在CSS3中transform主要包括以下几种:旋转rotate、扭...
    hzrWeber阅读 22,172评论 0 19
  • 关于css3变形 CSS3变形是一些效果的集合,比如平移、旋转、缩放和倾斜效果,每个效果都被称作为变形函数(Tra...
    hopevow阅读 6,400评论 2 13
  • CSS里transform变形这个属性有点学习难度,尤其在CSS3里加上了3D效果之后,2维变3维学习成本更是成倍...
    张歆琳阅读 27,998评论 5 81
  • 1、属性选择器:id选择器 # 通过id 来选择类名选择器 . 通过类名来选择属性选择器 ...
    Yuann阅读 1,656评论 0 7
  • 选择qi:是表达式 标签选择器 类选择器 属性选择器 继承属性: color,font,text-align,li...
    wzhiq896阅读 1,798评论 0 2