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的更多相关文章

  1. No.3 - CSS transition 和 CSS transform 配合制作动画

    课程概述 作业提交截止时间:09-01 任务目的 深度理解掌握 transition-timing-function 以及它的意义 学会配合使用 CSS transform 和CSS transiti ...

  2. CSS Transform / Transition / Animation 属性的区别

    back21 Jun 2011 Category: tech Tags: css 最近想UI的动画转到css3能吃进3d加速的属性上面来以加强动画的连贯性.只是对于css几个新加的属性不太熟悉,常常容 ...

  3. Html CSS transform matrix3d 3D转场特效

    Html CSS transform matrix3d 3D转场特效 透视矩阵 2n/(r-l) 0 (r+l)/(r-l) 0 0 2n/(t-b) (t+b)/(t-b) 0 0 0 (n+f)/ ...

  4. CSS Counter Style试玩儿

    2015年2月3日,CSS Counter Style level3成为了W3C的候选标准,是时候来一探究竟,看看强大魔力的@counter-style如何自定义list-style和counter. ...

  5. [Coding Style] CSS coding style

    CSS coding style Note 结合实际工作中的规范和推荐大家使用的CSS书写规范.顺序这篇文章整合而成 Navigation CSS 书写顺序 CSS 常用文件命名 CSS 常用命名规范 ...

  6. css: transform导致文字显示模糊

    css: transform导致文字显示模糊 有人认为模糊的原因是:"transform时div的宽度或者高度并不是偶数,偏移 50% 之后,像素点不是整数,和显示像素没有对上". ...

  7. how to overwrite css !important style

    how to overwrite css !important style css !important bug how to override css !important style https: ...

  8. CSS Transform完全指南 #flight.Archives007

    Title/ CSS Transform完全指南 #flight.Archives007 序: 第7天了! 终身学习, 坚持创作, 为生活埋下微小的信仰. 我是忘我思考,共同进步! 简介: 一篇最简约 ...

  9. CSS Transform完全指南(第二版) #flight.Archives007

    Title/ CSS Transform完全指南(第二版) #flight.Archives007 序: 第7天了! 终身学习, 坚持创作, 为生活埋下微小的信仰. 我是忘我思考,共同进步! 简介: ...

随机推荐

  1. 1到n的整数中，1出现的次数

    参考链接:https://discuss.leetcode.com/topic/18054/4-lines-o-log-n-c-java-python 1到n的整数中,1出现的次数,如11中,1出现了 ...

  2. android studio 3.0 集成ijkplayer

    一.ijkplayer编译过程略,有兴趣的朋友可以再研究,以下以编译好的版本讲解. 将ijkplayer相关的so及aar文件复制到app下的libs目录,为支持多版本的手机使用,将所有的so文件都复 ...

  3. Oracle_PL/SQL(7) 集合

    pl/sql集合处理单行单列数据,可以使用标量变量:处理单行多列的数据,可以使用pl/sql记录(%rowtype,record):处理单列多行数据,可以使用pl/sql集合. pl/sql集合类型是 ...

  4. Tools.Eclipse.HowToImportAnAndroidLibraryProjectIntoWorkspace

    1. File->New->Other Picture-1 2. Select "Android Project from Existing Code", and cl ...

  5. echo 变量不加引号出错

    result=`ps aux  | grep “×××” |grep -v “×××” start_time=$(echo $result | awk '{print $9}') 问题:发现输出是 s ...

  6. PHP 判断字符串括号是否匹配

    <?php function aa($str) { $temp = array(); for ($i = 0; $i < strlen($str); $i++) { $t = $str[$ ...

  7. abp项目中无法使用HttpContext.Current.Session[""]的问题

    web项目Global.asax.cs中加入如下代码 public override void Init() { this.PostAuthenticateRequest += (sender, e) ...

  8. rapidjson 的封装学习

    #pragma once #include "Util.h" #include "rapidjson/writer.h" #include "rapi ...

  9. so文件相关

    2018-08-31 今天尝试了一下编译so文件. 最开始是按照这个博主来操作的https://blog.csdn.net/tianshuai4317618/article/details/79073 ...

  10. mongoDB（Linux）

    启动  service mongod start 安装好后,输入mongo进入控制台 创建数据库 use baseName db.createCollection("game_record& ...