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. 【MINA学习笔记】—— 1.体系结构分析[z]

    前言 Apache的MINA框架是一个早年非常流行的NIO框架,它出自于Netty之父Trustin Lee大神之手.虽然目前市场份额已经逐渐被Netty取代了,但是其作为NIO初学者入门学习框架是非 ...

  2. IDEA配置maven,jdk,编码

    1.电脑已解压maven,修改好settings.xml文件,本地仓库,下载远程镜像 2.

  3. Oracle性能优化2- 依据场景选择技术

    1.索引的坏处 索引可以加快查询效率,但是使用不当,会造成插入性能很低 drop table test1 purge; drop table test2 purge; drop table test3 ...

  4. 19.Mysql优化数据库对象

    19.优化数据库对象19.1 优化表的数据类型应用设计时需要考虑字段的类型和长度,并留有一定长度冗余.procedure analyse()函数可以对表中列的数据类型提出优化建议.procedure ...

  5. 1.Mysql的安装与配置

    1.Mysql的安装与配置1.1 Mysql的下载 mysql是开源数据库,开源数据库在中低端应用中占据了很大的市场份额. mysql社区版自由下载而且安全免费,官方不提供任何技术支持,适用于普通用户 ...

  6. 在电脑上查看小米手机连接wifi时保存的密码

    手机连接的wifi,想另一个手机也连上,密码忘了. 先备份手机的资料,然后将手机连上电脑,在SD卡上MIUI-backup-allbackup文件夹中, 找到刚才备份的文件夹 点进去找到WLAN设置. ...

  7. MacDev.GarbageCollectionIsDeprecated-WhenXcodeCompileMacAppProject

    Garbage Collection is not supported 当Xcode编译Mac OSX App时报错:"Garbage Collection is not supported ...

  8. 20172325 2017-2018-2 《Java程序设计》第十一周学习总结

    20172325 2017-2018-2 <Java程序设计>第十一周学习总结 教材学习内容总结 Android简介 Android操作系统是一种多用户的Linux系统,每个应用程序作为单 ...

  9. SSH无法连上CentOS7的问题

    今天安装完带GNOME的CentOS后发现XShell无法连接上Linux. 原因是sshd服务没有开启.下面是解决办法: 1 ip addr 发现网卡名称为ens33 2 在/etc/sysconf ...

  10. kbmmw 的远程桌面功能2-android手机端

    前面讲了PC 端的远程操作,今天讲一下如何用手机控制远程桌面(真的能操作的很爽吗?), 要使手机可以远程控制,首先在在kbmmwconfig.inc 文件里面加入FMX 支持 {$DEFINE KBM ...