zoukankan      html  css  js  c++  java
  • css3 flip 翻转

            .container{
                margin:30px auto;
                /* How pronounced should the 3D effects be */
                perspective: 500;
                -webkit-perspective: 500;
                -moz-perspective: 500;
                -ms-perspective: 500;
                -o-perspective: 500;
                width:150px;
                height:150px;
                position:relative;
                /*Some UI */
                border-radius:6px;
                -webkit-border-radius:6px;
                -moz-border-radius:6px;
                -ms-border-radius:6px;
                -o-border-radius:6px;
                font-size:28px;
                line-height:150px;
                vertical-align:middle;
                cursor:pointer;
            }
    
            .box-front,.box-back{
                /* Enable 3D transforms */
                transform-style: preserve-3d;
                -webkit-transform-style: preserve-3d;
                -moz-transform-style: preserve-3d;
                -ms-transform-style: preserve-3d;
                -o-transform-style: preserve-3d;
                transform-style: preserve-3d;
                backface-visibility: hidden;
                -webkit-backface-visibility: hidden;
                -moz-backface-visibility: hidden;
                -ms-backface-visibility: hidden;
                -o-backface-visibility: hidden;
                width:100%;
                height:100%;
                position:absolute;
                background-color:#0090d9;
                /* Animate the transitions */
                -webkit-transition:0.8s; text-align:center;
                -moz-transition:0.8s; text-align:center;
                -ms-transition:0.8s; text-align:center;
                -o-transition:0.8s; text-align:center;
                transition:0.8s; text-align:center;
                color:#FFF;
                border-radius:6px;
                -webkit-border-radius:6px;
                -moz-border-radius:6px;
                -ms-border-radius:6px;
                -o-border-radius:6px;
            }
    
            .box-back{
                /* The back side is flipped 180 deg by default */
                transform:rotateY(180deg);
                -webkit-transform:rotateY(180deg);
                -moz-transform:rotateY(180deg);
                -ms-transform:rotateY(180deg);
                -o-transform:rotateY(180deg);
                background-color:#f35958;
    
            }
    
            .container:hover .box-front{
                /* When the container is hovered, flip the front side and hide it .. */
                transform:rotateY(180deg);
                -webkit-transform:rotateY(180deg);
                -moz-transform:rotateY(180deg);
                -ms-transform:rotateY(180deg);
                -o-transform:rotateY(180deg);
            }
    
            .container:hover .box-back{
                /* .. at the same time flip the back side into visibility */
                transform:rotateY(360deg);
                -webkit-transform:rotateY(360deg);
                -moz-transform:rotateY(360deg);
                -ms-transform:rotateY(360deg);
                -o-transform:rotateY(360deg);
            }
    


    <div class="container"> <div class="box-front">Front :)</div> <div class="box-back">Back :D </div> </div>
  • 相关阅读:
    SQLITE3在php中的运用
    C# DllImport用法和路径问题
    ExtJs2.0学习系列(9)Ext.TabPanel之第一式
    ExtJs2.0学习系列(11)Ext.XTemplate
    ExtJs2.0学习系列(12)Ext.TreePanel之第一式
    ExtJs2.0学习系列(10)Ext.TabPanel之第二式
    ExtJs2.0学习系列(6)Ext.FormPanel之第三式(ComboBox篇)
    ExtJs2.0学习系列(15)extjs换肤
    ExtJs2.0学习系列(8)Ext.FormPanel之第五式(综合篇)
    ExtJs2.0学习系列(5)Ext.FormPanel之第二式
  • 原文地址:https://www.cnblogs.com/szatpig/p/6879450.html
Copyright © 2011-2022 走看看