zoukankan      html  css  js  c++  java
  • css3 3d翻转效果

    <div class="demo">
           <span class="front">
                aaaaaaaaaaaaaa
           </span>
           <span class="behind">
               bbbbbbb
           </span>
    </div>

    .demo{
    display: block;
    cursor: pointer;
    position: relative;
    190px;/*限定3d展示范围*/
    height: 243px;
    /*-webkit-perspective: 200px;*/
    border: 1px solid #f00;
    }
    .demo span{
    display: block;
    /*指定该元素的具有3d翻转效果*/
    -webkit-transform-style: preserve-3d;
    -moz-transform-style: preserve-3d;
    -ms-transform-style: preserve-3d;
    transform-style: preserve-3d;
    /*指定元素3d反面是否可见*/
    -webkit-backface-visibility: hidden;
    -moz-backface-visibility: hidden;
    -ms-backface-visibility: hidden;
    backface-visibility: hidden;
    -webkit-transition: all .4s ease-in-out;
    -moz-transition: all .4s ease-in-out;
    -ms-transition: all .4s ease-in-out;
    -o-transition: all .4s ease-in-out;
    transition: all .4s ease-in-out;
    }
    .demo .front{
    -webkit-transform: rotateX(0deg);
    -moz-transform: rotateX(0deg);
    -ms-transform: rotateX(0deg);
    -o-transform: rotateX(0deg);
    transform: rotateX(0deg);
    }
    .demo .front.hover{
    -webkit-transform: rotateX(180deg);
    -moz-transform: rotateX(180deg);
    -ms-transform: rotateX(180deg);
    -o-transform: rotateX(180deg);
    transform: rotateX(180deg);
    }
    .demo .behind{
    /*默认该层就是反面,并且不可见*/
    position: absolute;left: 0;top: 0;
    display: table;
    cursor: text;
    100%;
    height: 100%;
    background: #00a3cf;
    -webkit-transform: rotateX(180deg);
    -moz-transform: rotateX(180deg);
    -ms-transform: rotateX(180deg);
    -o-transform: rotateX(180deg);
    transform: rotateX(180deg);
    display: none9;
    }

    .demo .behind.hover{
    -webkit-transform: rotateX(0deg);
    -moz-transform: rotateX(0deg);
    -ms-transform: rotateX(0deg);
    -o-transform: rotateX(0deg);
    transform: rotateX(0deg);
    }

  • 相关阅读:
    Oracle创建表空间、创建用户以及授权
    链接正常但IE浏览器无法显示网页的几种情况
    Oracle11g自带的SQL_developer无法打开
    Oracle- 复杂查询及总结
    oracle用户管理
    Oracle简介及安装
    【js】setInterval动态改变定时器时间周期,三次点击事件,时间间隔内只捕捉一次点击事件
    【tip】java_mysql遇到的一些问题
    【tip】java_部署名称与项目名称不一致
    【tip】java_1
  • 原文地址:https://www.cnblogs.com/xiaotaiyang/p/3991316.html
Copyright © 2011-2022 走看看