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

查看全文

相关阅读:
Sql的基础知识(一)
Django--分页功能
 django--基础操作
 CSRF攻击与防御（转载）
谈谈CSRF
浅谈Dom遍历
 node50行代码实现壁纸爬取
 node解决request中文乱码问题
 数组去重方法（转载）
淘宝dns解析错误导致首页打不开

原文地址：https://www.cnblogs.com/zhuangzebo/p/6366419.html