zoukankan      html  css  js  c++  java
  • CSS Transform Style

        As CSS3 developing quickly, the transform style can be written conviently. 

    I find that it is an interesting effect, so I write it down with my code here.

    The most important CSS property is transform-style.

          Here is the effect. When the mouse does not move over the front side, it

    shows "front". If we move the mouse over the the front side, it will transform

    into "back" side.

    The front side:

    The back side:

    index.html

    <html>
    <head>
        <title>transform style</title>
        <link rel="stylesheet" type="text/css" href="css/style.css" />
        <script type="text/javascript" src="js/jquery-3.1.1.min.js"></script>
        <script type="text/javascript" src="js/jquery-func.js"></script>
    </head>
    <body>
        <div id="container">
            <div class="t">
                <div class="t-front">
                    <p>front<p>
                </div> 
                <div class="t-back">
                    <p>back</p>
                </div>
            </div>
            <div class="t">
                 <div class="t-front">
                    <p>front<p>
                </div> 
                <div class="t-back">
                    <p>back</p>
                </div>       
            </div>
            <div class="t">
                <div class="t-front">
                    <p>front<p>
                </div> 
                <div class="t-back">
                    <p>back</p>
                </div>
            </div>
            <div class="t">
                <div class="t-front">
                    <p>front<p>
                </div> 
                <div class="t-back">
                    <p>back</p>
                </div>        
            </div>
        </div>
    </body>
    </html>

    js/jquery-func.js

    $(document).ready(function() {
    
        $('.t').on('mouseover', function() {
            $(this).addClass('flipped');
        });
    
        $('.t').on('mouseout', function() {
            $(this).removeClass('flipped');
        })
    })

    css/style.css

    /* style for transform style */
    
    body {
        margin: 0px;
        padding: 0px;
        background: #ffffff;
    }
    #container {
        position: absolute;
        top:20%;
        left:15%;
        width: 900px;
        height: auto;
    }
    .t {
        position: relative;
        text-align: center;
        float: left;
        width: 200px;
        height: 200px;
        border: 1px solid #39bd9f;
        margin: 1px;
        transform-style: preserve-3d;
        -webkit-transform-style: preserve-3d;
        -moz-transform-style: preserve-3d;
        -o-transform-style: preserve-3d;
        transition: transform 1s;
        -webkit-transition: -webkit-transform 1s;
        -moz-transition: -moz-transform 1s;
        -o-transition: -o-transform 1s;
    }
    
    .t-front, .t-back {
        display: block;
        position: absolute;
        width: 100%;
        height: 100%;
        backface-visibility: hidden;
        -webkit-backface-visibility: hidden;
        -moz-backface-visibility: hidden;
        -o-backface-visibility: hidden;
    }
    
    .t-back {
        transform: rotateY( 180deg );
        -webkit-transform: rotateY( 180deg );
        -moz-transform: rotateY( 180deg );
        -o-transform: rotateY( 180deg );
    }
    
    .flipped {
        transform: rotateY( 180deg );
        -webkit-transform: rotateY( 180deg );
        -moz-transform: rotateY( 180deg );
        -o-transform: rotateY( 180deg );
    }

    reference: http://www.quackit.com/css/css3/properties/css_transform-style.cfm

    link: http://www.cnblogs.com/zhuangzebo/p/6366419.html

  • 相关阅读:
    MySQL DROP 大表时的注意事项
    无主键指定字段补全的示例
    GoldenGate的监控
    mysql的root的权限被控制无法授权
    goldengate 过滤对某张表的复制操作
    给用户授予权限时应该尽量避免ANY系统权限
    OGG日常运维监控的自动化脚本模板
    异构GoldenGate 12c 双向复制配置
    异构GoldenGate 12c 单向复制配置(支持DDL复制)
    异构GoldenGate 12c 单向复制配置
  • 原文地址:https://www.cnblogs.com/zhuangzebo/p/6366419.html
Copyright © 2011-2022 走看看