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

  • 相关阅读:
    使用Dorado框架开发必备参考
    Dorado重用最佳实践
    css布局_web
    dorado学习笔记(二)
    Oracle归档日志删除
    给大家拜年啦!
    悟透JavaScript
    BCM57781网卡驱动下载地址
    win7安装jdk完后配置
    win7删除SVN保存的本地密码
  • 原文地址:https://www.cnblogs.com/zhuangzebo/p/6366419.html
Copyright © 2011-2022 走看看