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的值,作用是让元素放大。

     

  • 相关阅读:
    HTTP协议
    MySQL建立主-从服务器双机热备配置
    centOS7安装配置mysql5.7.21
    修改docker镜像的默认存储目录
    docker--学习笔记
    MySQL数据库操作
    zabbix注意事项和常用命令
    CnentOS6.5安装zabbix2.2
    如何查询一个进程下面的线程数(进程和线程区别)
    OSPF与ACL实例
  • 原文地址:https://www.cnblogs.com/gulan/p/5819023.html
Copyright © 2011-2022 走看看