css3 3d正反面翻转
<!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正反面翻转的更多相关文章
- CSS3 3D立方体翻转菜单实现教程
今天我们来看一个非常有创意的CSS3 3D菜单,这个菜单的菜单项是可以旋转的长方体,鼠标滑过是长方体即可旋转,看看下面的效果图,是不是感觉非常酷,我觉得这个菜单很适合用在咱们开发人员的个人网站上. 当 ...
- CSS3—3D翻转
本案例主要是css3和html5,不会js也可以做动画◕.◕ 一.首先看下主要需要的样式: perspective transform transition position classList 就这 ...
- CSS3实现3d菜单翻转
transform-style:flat | preserve-3d: 3d透视属性.针对子元素如何在3d空间相对其父元素渲染,这个属性声明在父元素上,并且他的子元素使用了transform才会有效. ...
- css3实现3D立体翻转效果
1.在IE下无法显示翻转效果,火狐和谷歌可以 /*样式css*/ .nav-menu li { display: inline; } .nav-menu li a { color: #fff; dis ...
- HTML5之CSS3 3D transform 剖析式学习之一
最近坐地铁发现“亚洲动物基金”在地铁上做了很多公益广告,比较吸引人的是一个月熊的广告.做的很可爱.回去就搜了一下,发现这个网站是HTML5做的,非常炫. 所以想学习一下,方法就是传统的学习办法,模仿. ...
- CSS3 3D Transform
CSS3 3D Transform 原文:http://www.w3cplus.com/css3/css3-3d-transform.html 三维变换使用基于二维变换的相同属性,如果您熟悉二维变换, ...
- 8套迷人精致的CSS3 3D按钮动画
1.纯CSS3 3D按钮 按钮酷似牛奶般剔透 CSS3按钮一般都可以设计的非常漂亮,利用投影.渐变等CSS3属性特效可以把按钮渲染的十分动感.今天分享的这款CSS3按钮外观非常特别,它看上去酷似晶莹剔 ...
- jquery 3D分页翻转滑块
jquery 3D分页翻转滑块,jquery分页,jquery插件,jquery,3D翻转,css3分页,360度旋转,网页特效代码3D分页翻转滑块是一款使用网格样式与滑块效果分页的特效.
- 【Web动画】CSS3 3D 行星运转 && 浏览器渲染原理
承接上一篇:[CSS3进阶]酷炫的3D旋转透视 . 最近入坑 Web 动画,所以把自己的学习过程记录一下分享给大家. CSS3 3D 行星运转 demo 页面请戳:Demo.(建议使用Chrome打开 ...
随机推荐
- 安装SQL Server 2016出错提示：需要安装oracle JRE7 更新 51(64位)或更高版本完美解决办法
错误提示原因:安装时检测出电脑没有安装JDK,而且是版本7(其他版本不行) 解决方法:先进下面这个网站安装JDK,安装好后配置环境变量,然后重新安装SQL Server 2016即可 http://w ...
- 【DB2】关闭表的日志功能
2018.11.19 客户遇到一个问题,在import数据的时候,产生了大量的日志,客户的数据库是HADR模式,通过评估,这几张表是可以允许在备库上不查询的,表中的数据时临时的. 方案一:修改脚本,将 ...
- chrome断点调试&&其他技巧
chrome断点调试 1. 在编写JavaScript代码时,如果 出现了bug,就要不断的去找错误,如果console控制台中提示还好说,可是没有提示恐怕就要费一番周折了.但是有了chrome这个浏 ...
- 在MVC过滤器中获取触发的Controller、Action、参数 等
首先是实现接口System.Web.Mvc.IActionFilter的过滤器 获取Controller.Action.参数 方法一. string actionName = filterContex ...
- 学生信息管理系统-顺序表&&链表（数据结构第一次作业）
实验目的 : 1 .掌握线性表的定义: 2 .掌握线性表的基本操作,如建立.查找.插入和删除等. 实验内容: 定义一个包含学生信息(学号,姓名,成绩)的的 顺序表和链表,使其具有如下功能: (1) 根 ...
- 数据输入——生成你需要的echart图(世界地图，气泡图)
上一篇文章介绍了:堆积柱状图.扇形图.嵌套环形图,现在来介绍一下:世界地图和气泡图 1.世界地图 http://echarts.baidu.com/examples/editor.html?c=map ...
- 一款高效视频播放控件的设计思路（c# WPF版）
因工作的需要,开发了一款视频播放程序.期间也经历许多曲折,查阅了大量资料,经过了反复测试,终于圆满完成了任务. 我把开发过程中的一些思路.想法写下来,以期对后来者有所帮助. 视频播放的本质 就是连续的 ...
- PMP备考指南之第二章：项目运作环境
本文已同步至 GitHub/Gitee/公众号,感兴趣的同学帮忙点波关注~ 第二章:项目运作环境 1. 事业环境因素.组织过程资产 事业环境因素 Enterprise Environmental Fa ...
- PMP备考指南之第一章：引论
本文已同步至 GitHub/Gitee/公众号,感兴趣的同学帮忙点波关注~ 第一章 引论 1."项目管理知识体系":应该包含所有行业.应用领域项目管理的具体知识.技能.方法和实践 ...
- node服务端搭建学习笔记
咳咳,终于迈出这一步了...这篇文章将是边学边写的真正笔记...用于mark下学习过程中的点滴~ 开篇先把我学习参考的文章来源给出,以表示对前人的尊敬: https://github.com/nswb ...