CSS Transform Style

时间：2017-02-04 22:01:52 阅读：431 评论：0 收藏：0 [点我收藏+]

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

CSS Transform Style

原文：http://www.cnblogs.com/zhuangzebo/p/6366419.html

踩

(0)

评论一句话评论（0）

分享档案

更多>

2021年09月23日 (328)
2021年09月24日 (313)
2021年09月17日 (191)
2021年09月15日 (369)
2021年09月16日 (411)
2021年09月13日 (439)
2021年09月11日 (398)
2021年09月12日 (393)
2021年09月10日 (160)
2021年09月08日 (222)