zoukankan      html  css  js  c++  java
  • css3 preserve-3d 的理解 注意IOS上的兼容

    css3 preserve-3d 的理解

    <pre>
    <!DOCTYPE html>
    <html lang="en">

    <head>
    <meta charset="UTF-8">
    <title>转换模块-正方体</title>
    <style>
    * {
    margin: 0;
    padding: 0;
    /*去除默认边距*/
    }

    body,
    html {
    100%;
    height: 100%;
    }

    .wrap3d {
    100%;
    height: 100%;
    position: relative;
    /*设置摄像机离目标物体距离 让3D效果看起来更逼真*/
    transform: perspective(400px);
    -webkit-transform: perspective(400px);
    /*设置为3d空间*/
    transform-style: preserve-3d;

    position: relative;

    }
    .hongmian{
    30%;
    height:22rem;
    position: absolute;
    left:30%;
    top:2rem;
    background: #F00;
    transform: rotateX(90deg) translateZ(-20px);
    -webkit-transform: rotateX(4deg) translateZ(-20px);
    }

    </style>
    </head>

    <body>
    <div class="wrap3d">
    <div class="hongmian"></div>
    </div>
    </body>

    </html>
    </pre>

    ps:补充下 backface-visibility:hidden 代表背景不可见     就是正面的图片 旋转到背景 就看不到了  默认是可见的

  • 相关阅读:
    Log4Net记录到MySql
    创建快照
    grep的用法(CentOS7)及有关正则表达式的使用
    samba
    mkdir
    raid0和raid5的 实验过程
    route
    source和sh执行脚本时的差异
    echo命令的简单用法和实例
    smbpasswd和pdbedit
  • 原文地址:https://www.cnblogs.com/newmiracle/p/11856340.html
Copyright © 2011-2022 走看看