zoukankan      html  css  js  c++  java
  • 变形--缩放 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值,则表示XY两个方向的缩放倍数是一样的。

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

     

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

     

    HTML代码:

    <div class="wrapper">

      <div>我将放大1.5</div>

    </div>

    CSS代码:

    .wrapper {

       200px;

      height: 200px;

      border:2px dashed red;

      margin: 100px auto;

    }

    .wrapper div {

       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);

    }

    演示结果

     

    注意: scale()的取值默认的值为1,当值设置为0.01到0.99之间的任何值,作用使一个元素缩小;而任何大于或等于1.01的值,作用是让元素放大。

     

  • 相关阅读:
    在Spring 中如果Girl要Kiss Boy咋办捏?
    对象的序列化
    HibernateHQL
    Struts 动态FORM实现过程
    对struts一点理解总结
    Hibernate Query Language(HQL)。
    Hibernate中Inverse和Cascade
    Spring 中的内部bean 和集合
    设计模式到底离我们有多远
    Aspx页面转静态页面
  • 原文地址:https://www.cnblogs.com/gulan/p/5819023.html
Copyright © 2011-2022 走看看