<!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. (5)Oracle基础--约束

    · 约束的作用 <1> 定义规则 <2> 确保数据的完整性 · 约束 <1> 非空约束 ① 创建表时为字段添加非空约束 CREATE TABLE table_nam ...

  2. [bug]微信小程序使用 <scroll-view> 和 box-shadow 引起页面抖动

    背景 为了实现点点点动态loading效果,并且方便使用(只需要给一个空元素加一个.loading),有如下代码: .loader { background-color: #fff; font-siz ...

  3. 【wireshark】开发环境搭建

    1. 引言 本文相关内容可参考Wireshark开发指南第2章”Quick Setup” 要对wireshark代码进行修改,除了下文介绍的lua插件的方式以外,都需要对wirehshark源码进行编 ...

  4. 2019 OO第一单元总结(表达式求导)

    一. 基于度量的程序结构分析 1. 第一次作业 这次作业是我上手的第一个java程序,使用了4个类来实现功能.多项式采用两个arraylist来存,系数和幂指数一一对应. private ArrayL ...

  5. 【OpenCV3】threshold()函数详解

    threshold()函数源码 double cv::threshold( InputArray _src, OutputArray _dst, double thresh, double maxva ...

  6. Distributed PostgreSQL on a Google Spanner Architecture – Query Layer

    转自:https://blog.yugabyte.com/distributed-postgresql-on-a-google-spanner-architecture-query-layer/ Ou ...

  7. MVC的默认约定

    MVC项目中有很多默认约定,一种是对项目目录分配的约定,比如默认情况下需要将Javascript文件放置在Script文件夹中,但这并不妨碍你将这个文件夹重新命名,也可以将整个文件夹放置到任何想要放置 ...

  8. HttpURLConnection解析

    请求响应流程 设置连接参数的方法 setAllowUserInteraction setDoInput setDoOutput setIfModifiedSince setUseCaches setD ...

  9. Eclipse-查看jar源码乱码问题解决

    步骤1: 在eclipse菜单栏中,Window–>Preferences–>General–>Content types,将JAR Content , Java Class Fil ...

  10. NoSQL之Redis入门笔记

    Redis 1.Redis介绍 1.1 NoSQL:一类新出现的数据库(not only sql),它的特点 不支持sql语法 存储结构跟传统关系型数据库中的那种关系表完全不同,nosql中存储的数据 ...