<!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菜单翻转

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

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

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

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

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

  5. CSS3 3D Transform

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

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

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

  7. jquery 3D分页翻转滑块

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

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

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

  9. 纯css3 3D图片立方体旋转动画特效

    纯css3 3D立方体模块,鼠标触碰,模块炸开,大立方体中套小立方体 效果展示 手机扫描二维码体验效果: 效果图如下: 源码下载:http://hovertree.com/h/bjaf/0qmul8g ...

随机推荐

  1. BZOJ 2693: jzptab [莫比乌斯反演 线性筛]

    2693: jzptab Time Limit: 10 Sec  Memory Limit: 512 MBSubmit: 1194  Solved: 455[Submit][Status][Discu ...

  2. 软件工程(FZU2015)赛季得分榜,第六回合

    目录 第一回合 第二回合 第三回合 第四回合 第五回合 第6回合 第7回合 第8回合 第9回合 第10回合 第11回合 积分规则 积分制: 作业为10分制,练习为3分制:alpha30分: 团队项目分 ...

  3. Codeforces 597C. Subsequences (树状数组+dp)

    题目链接:http://codeforces.com/contest/597/problem/C 给你n和数(1~n各不同),问你长为k+1的上升自序列有多少. dp[i][j] 表示末尾数字为i 长 ...

  4. Attribute (一)

    本文导读 1.概念 2.自定义一个 Attribute 概念       Attribute是一个特殊的类,我们知道 .NET 程序集 具有自描述的特性(由于元数据),Attribute和.NET的元 ...

  5. mongodb 教程一

    mongodb是nosql(not only sql)的一种方式 .是对不同于传统的关系型数据库的数据库管理系统的统称. NoSQL - 代表着不仅仅是SQL- 没有声明性查询语言- 没有预定义的模式 ...

  6. 响应式布局:Flexbox应用总结

    距离上篇文章<布局神器:Flexbox>的发表已有一周时间,转眼这周又到了周五(O(∩_∩)O~~): 习惯性在周五对自己的一周工作进行下总结,记录下这周值得被纪念的工作事件,无论是好的, ...

  7. python socketserver实现客户端多并发

    直接看代码 server #!/usr/bin/env python # -*- coding:utf-8 -*- import socketserver import subprocess clas ...

  8. postfix疯狂外发垃圾邮件

    分析 一.查找main.cf配置文件 localhost# find / -name main.cf /etc/postfix/main.cf 二.打开/etc/postfix/main.cf来看看. ...

  9. Linux~上部署.net MVC出现的问题与解决

    这几天一直在搞linux下面的.net mvc的部署工作,遇到了很多问题,还好有一些朋友的帮助,问题才得到了解决! 环境:Linux+Mono+Jexus 希望的结果:直接运行windows+vist ...

  10. Asch PK Lisk系列之一:安全性

    在币圈,听到对数字货币的质疑之声从来没少过.为什么有人会质疑呢?他们列出了很多理由(以下四点内容摘自网络): 数字货币是依附于网络的,而中国并没有独立自主的网络技术,容易被敌对势力利用数字货币损害中国 ...