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. 无法连接到localhost。其他信息：用户“sa”登录失败。原因：该用户被禁用。（Microsoft Sql Server,错误：18470）.

    18470错误: 解决方案: 使用windows身份验证登录之后,选择安全性--->登录名--->sa--->右击--->属性: 右击选择属性进入属性页面: 选择状态,然后再登 ...

  2. android如何判断控件的显示或者隐藏

    可以利用Android view getVisibility()的值来实现,具体如下: (1)0 -------- VISIBLE 可见(1)4 -------- INVISIBLE 不可见但是占用布 ...

  3. nginx 启动报错 “/var/run/nginx/nginx.pid" failed” 解决方法

    问题: 重启虚拟机后,再次重启nginx会报错: open() "/var/run/nginx/nginx.pid" failed (2: No such file or dire ...

  4. fedora如何删除某个包且不删除依赖它的相关包

    背景: 软件包编译过程中需要安装依赖,yum-builddep   SRPMS/xxx.src.rpm, 有时会遇到“多库版本保护”的问题,从而导致无法安装其他版本的依赖包 解决办法: rpm -e ...

  5. spring batch批处理框架学习

    内如主要来自以下链接: http://www.importnew.com/26177.html http://www.infoq.com/cn/articles/analysis-of-large-d ...

  6. BZOJ 1874 取石子游戏 - SG函数

    Description $N$堆石子, $M$种取石子的方式, 最后取石子的人赢, 问先手是否必胜 $A_i <= 1000$,$ B_i <= 10$ Solution 由于数据很小, ...

  7. [RF]怎样用Robot Framework写好Test Case?

    1.介绍 这是一个关于如何用Robot Framework写好Test Case的高层次的指导准则 怎样实际的与系统进行交互不在此文档范围内 最重要的准则是使测试用例尽可能的让熟悉此领域的人觉得简单易 ...

  8. mysql mariadb的VC客户端遇到的问题

    在使用VS2017编写数据库客户端 具体设置可参见以下内容 https://dev.mysql.com/doc/connector-cpp/en/connector-cpp-apps-windows- ...

  9. jvm 启动参数设置（转载）

    JVM启动参数 http://onlyor.iteye.com/blog/1722413 博客分类: java java java启动参数共分为三类其一是标准参数(-),所有的JVM实现都必须实现这些 ...

  10. 查看tomcat运行日志

    1.先到tomcat的logs目录下我这边是:/usr/local/apache-tomcat-7.0.73/logs 2.tail -f catalina.out 3.这样,前端有请求时候,就会输出 ...