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. stark组件前戏之项目启动前加载指定文件

    1. django项目启动时, 自定制执行某个py文件 dajngo 启动时.会将所有 路由加载到内存中. 我的目的就是在 路由加载之前,执行某个py文件. 每个app中都有一个 apps.py fr ...

  2. excel数据复制到html表格<textarea>中

    方案一 多行文本框接收到复制的excel值后,在文本框的chage事件中,将excel内容分割到二维数组中,然后填充到html的表格的input或textarea中. 数据格式: 单元格复制后的数据格 ...

  3. 10.31JS日记

    this问题 (1)this是js的一个关键字,指定一个对象,然后替代this: 函数中的this指向行为发生的主体,函数外的this都指向window,没有意义 (2)函数内的this跟函数在什么环 ...

  4. 1F - A+B for Input-Output Practice (III)

    Your task is to Calculate a + b. Input Input contains multiple test cases. Each test case contains a ...

  5. Android——Activity练习

    manifests里的AndroidManifest.xml <?xml version="1.0" encoding="utf-8"?> < ...

  6. image src base64 svg

    1.显示img: 大家可能注意到了,网页上有些图片的src或css背景图片的url后面跟了一大串字符,比如:data:image/png;base64, iVBORw0KGgoAAAANSUhEUgA ...

  7. day2-pycharm创建项目，driver下载和浏览器设置

    对于ie需要设置,才能使用ie做测试 火狐的使用不能超过43版本,ie11现在有多次弹出alert无法识别其内容的问题 https://github.com/SeleniumHQ/selenium/w ...

  8. LibreOJ 6003. 「网络流 24 题」魔术球 贪心或者最小路径覆盖

    6003. 「网络流 24 题」魔术球 内存限制:256 MiB时间限制:1000 ms标准输入输出 题目类型:传统评测方式:Special Judge 上传者: 匿名 提交提交记录统计讨论测试数据 ...

  9. merge_节点

    (1)CREATE可以创建相同节点,merge若节点已存在,则不会重新添加. CREATE (gp1:GoogleProfile1 {Id: 201401, Name:"Apple" ...

  10. php emoji mysql保存和搜索

    MySQL版本>=5.5.3 表字符集: utf8mb4 解决保存 排序规格: utf8mb4_bin 解决搜索 PHP:  set names utf8mb4 操作系统: WIN10 MAC