zoukankan      html  css  js  c++  java
  • css3 2D变换 transform

    1. 旋转函数rotate(),deg表示度数,transform-origin表示旋转的基点
      <head>
          <title>无标题文档</title>
          <style>
              body{height:400px;border:1px solid #000;}
              .box{width:100px;height:100px;background:red;margin:100px auto 0; transition:2s;}
              body:hover .box{ -webkit-transform:rotate(360deg);}
          </style>
      </head>
      <body>
          <div class="box">111</div>
      </body>
    2. 斜切,将矩形等形状扭曲,skewX(100deg),skrewY(30deg),以及x方向和y方向都斜切skew(15deg, 30deg)
      <head>
          <title>无标题文档</title>
          <style>
              body{height:400px;border:1px solid #000;}
              .box{width:100px;height:100px;background:Red;margin:100px auto 0; transition:2s;}
              body:hover .box{ -webkit-transform:skewX(45deg);}
          </style>
      </head>
      <body>
          <div class="box">111</div>
      </body>
    3. 缩放,scale()
      <head>
          <title>无标题文档</title>
          <style>
              body{height:400px;border:1px solid #000;}
              .box{width:100px;height:100px;background:Red;margin:100px auto 0; transition:2s;}
              body:hover .box{ -webkit-transform:scale(2);}
          </style>
      </head>
      <body>
          <div class="box">111</div>
      </body>
    4. 位置移动,translate(100px 200px),translateX(100px),translateY(200px)
      <head>
          <title>无标题文档</title>
          <style>
              body{height:400px;border:1px solid #000;}
              .box{width:100px;height:100px;background:Red;margin:100px auto 0; transition:2s;}
              body:hover .box{ -webkit-transform:translate(-100px,200px);}
          </style>
      </head>
      <body>
          <div class="box">111</div>
      </body>

        

  • 相关阅读:
    03:矩形分割 (二分)
    09:膨胀的木棍 (二分+角度计算)
    A Cubic number and A Cubic Number (二分) HDU
    B
    08:不重复地输出数 (set)
    10:河中跳房子 (二分)
    07:和为给定数 (二分)
    04:网线主管 (二分)
    河中跳房子
    010:输出前k大的数
  • 原文地址:https://www.cnblogs.com/donghualei/p/4872137.html
Copyright © 2011-2022 走看看