zoukankan      html  css  js  c++  java
  • transform 小技巧

    实现3D效果

    1.父级开启3D视角

    transform-style:preserve-3d

    perspective:2000px //定义 3D 转换元素的透视视图

    tansform:perspective(2000px)

    2.rotate

    rotate3d(x,y,z,angle)  //3D

    //2D

    rotateX(angle) 沿x轴旋转

    rotateY(angle) 沿y轴旋转

    rotateZ(angle) 沿z轴旋转

    3.translate

    translate3d(x,y,z) //3D

    同上

    4.scale

    scale3d(x,y,z) //3D

    同上

    5.skew  //2D

    skew(x-angle,y-angle)

    skewX(angle)

    skewY(angle)

    6.

    backface-visibility:visible/hidden  //隐藏背面

    tansform-origin:left/px/%  center/px/%  //旋转中心

    7.domo(翻牌效果)

    /*css*/

    <style>

    body{

      perspective: 800px;
    }
    .box{
       300px;
      height:400px;
      position: relative;
      margin:100px auto;
      transform-style:preserve-3d;
      transition:2s;
    }
    .front,.back{
      300px;
      height:400px;
      position: absolute;
      left:0;
      top:0;
      font-size:50px;
      line-height: 400px;
      text-align: center;
      background:pink;
    }
    .front{
      z-index:100;
      backface-visibility: hidden;
    }
    .back{
      transform: scale(-1,1);
    }
    .box:active{
      transform: rotateY(180deg);
    }

    </style>

    <!--html-->

    <body>

      <div class="box">
        <div class="front">前</div>
        <div class="back">后</div>
      </div>

    <body>

  • 相关阅读:
    2008年假期
    Asp.Net viewstate , session , cookie區別
    C#类型 参考表(MSDN)
    GIS ftp
    gis 好书推荐
    c#应该怎么改进?
    ArcEngine开发体验(附许可)
    gis开源开发资料(持续更新)
    GIS API乱弹
    Autodesk Map3d的应用和开发
  • 原文地址:https://www.cnblogs.com/xshaohua-com/p/6645976.html
Copyright © 2011-2022 走看看