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

查看全文

相关阅读:
Nginx+Keepalived(双机热备)搭建高可用负载均衡环境(HA)
库管理系统-- 后台管理开源啦,源码大放送
 .NET Core R2
Linux gdb调试
 webpack React+ES6
绿卡排队
 ABP分层设计
 vscode编写插件
 控制台程序的参数解析类库 CommandLine
Net Core MVC6 RC2 启动过程分析

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