<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>Document</title>

    <style>

.flip-container {

    perspective: 1000;

}

    /* flip the pane when hovered */

    /*.flip-container:hover .flipper, .flip-container.hover .flipper {

        transform: rotateY(180deg);

    }*/

     .flip-container.hover .flipper {

        transform: rotateY(180deg);

    }

.flip-container, .front, .back {

    width: 320px;

    height: 480px;

}

/* flip speed goes here */

.flipper {

    transition: 0.6s;

    transform-style: preserve-3d;

    position: relative;

}

/* hide back of pane during swap */

.front, .back {

    backface-visibility: hidden;

    position: absolute;

    top: 0;

    left: 0;

}

/* front pane, placed above back */

.front {

    z-index: 2;

    background: red;

}

/* back, initially hidden pane */

.back {

    transform: rotateY(180deg);

    background: cyan;

}

#myCard {

    padding-top:300px;

    }

    </style>

</head>

<body>

    <!-- <div class="flip-container" ontouchstart="this.classList.toggle('hover');"> -->

    <div class="flip-container">

    <div class="flipper">

        <div class="front">

            前面内容

        </div>

        <div class="back">

            背面内容

        </div>

    </div>

</div>

    <!-- /<div id="myCard" onclick="document.querySelector('.flip-container').classList.toggle('hover')">but</div> -->

    <div id="myCard">but</div>

    <script src="http://apps.bdimg.com/libs/jquery/2.1.4/jquery.min.js"></script>

    <script>

        $(function(){

            $('#myCard').click(function(){

                $('.flip-container').toggleClass('hover')

            })

        })

    </script>

</body>

</html>

原文：http://www.jianshu.com/p/99aeb911f547；

https://segmentfault.com/a/1190000003903190

css3 3d正反面翻转的更多相关文章

  1. CSS3 3D立方体翻转菜单实现教程

    今天我们来看一个非常有创意的CSS3 3D菜单,这个菜单的菜单项是可以旋转的长方体,鼠标滑过是长方体即可旋转,看看下面的效果图,是不是感觉非常酷,我觉得这个菜单很适合用在咱们开发人员的个人网站上. 当 ...

  2. CSS3—3D翻转

    本案例主要是css3和html5,不会js也可以做动画◕.◕ 一.首先看下主要需要的样式: perspective transform transition position classList 就这 ...

  3. CSS3实现3d菜单翻转

    transform-style:flat | preserve-3d: 3d透视属性.针对子元素如何在3d空间相对其父元素渲染,这个属性声明在父元素上,并且他的子元素使用了transform才会有效. ...

  4. css3实现3D立体翻转效果

    1.在IE下无法显示翻转效果,火狐和谷歌可以 /*样式css*/ .nav-menu li { display: inline; } .nav-menu li a { color: #fff; dis ...

  5. HTML5之CSS3 3D transform 剖析式学习之一

    最近坐地铁发现“亚洲动物基金”在地铁上做了很多公益广告,比较吸引人的是一个月熊的广告.做的很可爱.回去就搜了一下,发现这个网站是HTML5做的,非常炫. 所以想学习一下,方法就是传统的学习办法,模仿. ...

  6. CSS3 3D Transform

    CSS3 3D Transform 原文:http://www.w3cplus.com/css3/css3-3d-transform.html 三维变换使用基于二维变换的相同属性,如果您熟悉二维变换, ...

  7. 8套迷人精致的CSS3 3D按钮动画

    1.纯CSS3 3D按钮 按钮酷似牛奶般剔透 CSS3按钮一般都可以设计的非常漂亮,利用投影.渐变等CSS3属性特效可以把按钮渲染的十分动感.今天分享的这款CSS3按钮外观非常特别,它看上去酷似晶莹剔 ...

  8. jquery 3D分页翻转滑块

    jquery 3D分页翻转滑块,jquery分页,jquery插件,jquery,3D翻转,css3分页,360度旋转,网页特效代码3D分页翻转滑块是一款使用网格样式与滑块效果分页的特效.

  9. 【Web动画】CSS3 3D 行星运转 && 浏览器渲染原理

    承接上一篇:[CSS3进阶]酷炫的3D旋转透视 . 最近入坑 Web 动画,所以把自己的学习过程记录一下分享给大家. CSS3 3D 行星运转 demo 页面请戳:Demo.(建议使用Chrome打开 ...

随机推荐

  1. 带你走进php大马的结构模块编写之路

    本文原创作者:Laimooc 第一部分:前沿综述 本次我主要写了[文件的创建].[文件的删除].[文件的上传].[目录浏览].[命令执行]小模块,以及[组合的目录浏览和文件删除功能]的模块: 实验环境 ...

  2. ES6字符串相关扩展

    变量的解构赋值 // 数组的解构赋值 let [a,b,c] = [1,2,3]; //1,2,3 let [a,b,c] = [,123,]; //undefined 123 undefined l ...

  3. PostgreSQL 数据库错误代码解释

    PostgreSQL 服务器发出的所有消息都赋予了五个字符 的错误代码, 这些代码遵循 SQL 的 "SQLSTATE" 代码的习惯.需要知道发生了什么错误条件的应用通常应该测试错 ...

  4. 将url动态转换成二维码插件 - 兼容IE8

    插件地址  http://static.runoob.com/assets/qrcode/qrcode.min.js ,网页直接打开,然后ctrl+s保存到本地. <!DOCTYPE html& ...

  5. POJ 1147

    #include <iostream> #include <algorithm> #define MAXN 3005 using namespace std; int _m[M ...

  6. 服务器集群的session管理

    应用服务器的高可用架构设计主要基于服务无状态这一特性,但是事实上,业务总是有状态的,单机情况下,Session可由部署在服务器上的web容器(如Jboss)管理.在使用负载均衡的集群环境中,由于负载均 ...

  7. android学习-进程/线程管理-完整

    我们知道,应用程序的主入口都是main函数--"它是一切事物的起源" main函数工作也是千篇一律的, 初始化 比如ui的初始化,向系统申请资源等. 进入死循环 再循环中处理各种事 ...

  8. Go 开发

    0.参数传递永远是值传递,地址也是一种值 1.go 开发环境的配置 2.import 包的几种形式: 1)_,默认导入一个包时,会将包中内容导入再执行包中的init()方法,有时并不需要某个包,只是想 ...

  9. docker 安装集群管理工具 docker-compose

    compose将管理的容器分为3层, 工程, 服务, 容器. 一个工程中可包含多个服务, 每个服务中定义容器运行的镜像参数, 依赖, 一个服务中科包含多个容器实力, 并没有解决负载均衡的问题 dock ...

  10. Nodejs学习笔记（七）—Node.js + Express 构建网站简单示例

    前言 上一篇学习了一些构建网站会用到的一些知识点:https://www.cnblogs.com/flyingeagle/p/9192936.html 这一篇主要结合前面讲到的知识,去构建一个较为完整 ...