CSS Transform Style

时间：2022-09-20 16:29:39

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:

CSS Transform Style

The back side:

CSS Transform Style

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

相关文章