https://desandro.github.io/3dtransforms/docs/card-flip.html

---------------------------------------------------------------------------------------------------

Card Flip

We now have all the tools to start making 3D objects. Let’s get started with the basics, flipping a card.

Here’s the basic markup we’ll need:

<section class="container">
<div id="card">
<figure class="front">1</figure>
<figure class="back">2</figure>
</div>
</section>

The .container will house the 3D space. The #card acts as a wrapper for the 3D object. Two separate elements for both faces of the card, .front and .back. Even for such a simple object, I recommend using this same pattern for any 3D transform. Keeping the 3D space element and the object separate element establishes a paradigm that is simple to understand and easier to style.

We’re ready for some 3D stylin’. First, apply necessary perspective to the parent 3D space, along with any size or positioning styles.

.container {
width: 200px;
height: 260px;
position: relative;
perspective: 800px;
}

Now the #card element can be transformed in its parent’s 3D space. We’re using absolute/relative positioning so the 3D object is removed from the flow of the document. We’ll also add @width: 100%; and height: 100%;@. This ensures the object’s transform-origin will occur in the center of container. More on transform-origin later.

Let’s add a CSS3 transition so users can see the transform take effect.

#card {
width: 100%;
height: 100%;
position: absolute;
transform-style: preserve-3d;
transition: transform 1s;
}

The .container’s perspective only applies to direct descendant children, in this case #card. In order for subsequent children to inherit a parent’s perspective, and live in the same 3D space, the parent can pass along its perspective with transform-style: preserve-3d. Without 3D transform-style, the faces of the card would be flattened with its parents and the back face’s rotation would be nullified.

To position the faces in 3D space, we’ll need to reset their positions in 2D with position: absolute. In order to hide the back-side of the faces when they are faced away from the viewer, we use backface-visibility: hidden.

#card figure {
margin: 0;
display: block;
position: absolute;
width: 100%;
height: 100%;
backface-visibility: hidden;
}

To flip the .back face, we add a basic 3D transform of rotateY( 180deg ).

#card .front {
background: red;
}
#card .back {
background: blue;
transform: rotateY( 180deg );
}

With the faces in place, the #card requires a corresponding style for when it is flipped.

#card.flipped {
transform: rotateY( 180deg );
}

Now we have a working 3D object. To flip the card, we can toggle the flipped class. When .flipped, the #card will rotate 180 degrees, thus exposing the .back face.

See Example: Card 1

Slide-flip

Take another look at the Weather App 3D transition. You’ll notice that it’s not quite the same effect as our previous demo. If you follow the right edge of the card, you’ll find that it stays flush with the container. Instead of pivoting from the horizontal center, it pivots on that right edge. But the transition is not just a rotation – the edge moves horizontally from right to left. We can reproduce this transition just by modifying a couple lines of CSS from our original card flip demo.

The pivot point for the rotation occurs at the right side of the card. By default, the transform-origin of an element is at its horizontal and vertical center (50% 50% or center center). Let’s change it to the right side:

#card { transform-origin: right center; }

That flip now needs some horizontal movement with translateX. We’ll set the rotation to -180deg so it flips right side out.

#card.flipped {
transform: translateX( -100% ) rotateY( -180deg );
}

See Example: Card 2

介绍css 的3D 变换(3D transform)的更多相关文章

  1. CSS3 3D变换实例 滚动的正方体

    笔记: 2D变换 transform 位移   translateX() translateY()  简写:translate(X值,Y值)  正值向右,负值向左 旋转 rotate()  rotat ...

  2. css之3D变换

    3D变换的x,y,z轴是分别效果是: x轴旋转的话,就是头和脚进行转动 y轴旋转的话,就是左右手进行转动 z轴旋转的话,就是整个身体平铺在旋转. 上面是针对旋转的意思去,但是对于其他的类似一样,就是这 ...

  3. 基本3D变换之World Transform, View Transform and Projection Transform

    作者:i_dovelemon 来源:CSDN 日期:2014 / 9 / 28 主题:World Transform, View Transform , Projection Transform 引言 ...

  4. CSS3 3D变换

    可以这么说,3D变换是基于三维坐标系的.以下是“盗用”的图 CSS3中的3D变换主要包括以下几个功能函数: 3D位移:包括translateZ()和translate3d(): 3D旋转:包括rota ...

  5. CSS3之3D变换实例详解

    CSS3的3D效果很赞,本文实现简单的两种3D翻转效果.首先看效果和源代码,文末是文绉绉的总结部分^_^ 以下CSS代码为了简洁没有添加前缀,请视情况自行添加(自动化时代推荐使用其他的一些方法,如gu ...

  6. (一一九)通过CALayer实现阴影、圆角、边框和3D变换

    在每个View上都有一个CALayer作为父图层,View的内容作为子层显示,通过layer的contents属性决定了要显示的内容,通过修改过layer的一些属性可以实现一些华丽的效果. [阴影和圆 ...

  7. CSS3之3d变换与关键帧

    3d变换是在transform基础上实现的 transform-style:preserve-3d; 建立3d空间 perspective:; 景深(设置用户看的距离) perspective-ori ...

  8. OpenGL学习进程(12)第九课:矩阵乘法实现3D变换

    本节是OpenGL学习的第九个课时,下面将详细介绍OpenGL的多种3D变换和如何操作矩阵堆栈.     (1)3D变换: OpenGL中绘制3D世界的空间变换包括:模型变换.视图变换.投影变换和视口 ...

  9. [OpenGL ES 03]3D变换:模型,视图,投影与Viewport

    [OpenGL ES 03]3D变换:模型,视图,投影与Viewport 罗朝辉 (http://blog.csdn.net/kesalin) 本文遵循“署名-非商业用途-保持一致”创作公用协议 系列 ...

  10. 第1部分: 游戏引擎介绍, 渲染和构造3D世界

    原文作者:Jake Simpson译者: 向海Email:GameWorldChina@myway.com ---------------------------------------------- ...

随机推荐

  1. C++学习之继承篇

    今天通过对实验二继承,重载,覆盖的学习,让我更深一步理解了这些概念的区别. 首先来明确一个概念,函数名即地址,也就是说函数名就是个指针. 编译阶段,编译器为每个函数的代码分配一个地址空间并编译函数代码 ...

  2. JVM:内存分配与回收策略

    Java技术体系中所提倡的自动内存管理最终可以归结为自动化的解决了两个问题:给对象分配内存以及回收分配给对象的内存. 对象的内存分配,往大方向讲,就是在堆上分配(但也可能经过JIT编译后被拆散为标量类 ...

  3. MFCEditBox如何自动换行

    设置该EditBox属性: 1.Auto HScroll             False 2.OEM Convert           False 3.Want Return           ...

  4. Jupyter IPython dead kernel and do not restart

    本人遇到的情况:dead kernel & try to restart failed 查看CMD发现这个库安装有问题 解决办法 1.pip uninstall backports.shuti ...

  5. ajax中的json和jsonp详解

    出现的问题: 花了点时间研究ajax中的json和jsonp的原理,这里记录一下.以前一直在使用ajax调用数据,但是从来没有遇到跨域问题,也从来没有注意过json和jsonp的区别,总是一通乱用.但 ...

  6. gulp(1) 的使用

    1.安装node.js 2.全局安装gulp.js npm install gulp -g 3.在项目本地根目录再安装(通过黑窗口安装)npm install --save-dev gulp/ 或者 ...

  7. Dijkstra+set堆优化局部模板

    这是某天2018-10-25写的某题(P1613-luogu)的局部代码,目的是方便自己记忆一些细节,所以这里不过多赘述算法原理或题目 邻接矩阵mapp表示有向图 struct ELE { int i ...

  8. 零基础入门学习Python(34)--丰富的else语句及简洁的with语句

    知识点 else语句的用法: 1)配合if语句 if a>b: print(a) else: print(b) 2)配合while和for循环 只在循环完成后才执行,如果循环中执行使用到brea ...

  9. PHP:Mysqli 基础类

    文章来源:http://www.cnblogs.com/hello-tl/p/7592594.html <?php /** * __construct($Mysql_config) 构造函数 $ ...

  10. [bzoj3668][Noi2014][起床困难综合症] (按位贪心)

    Description 21 世纪,许多人得了一种奇怪的病:起床困难综合症,其临床表现为:起床难,起床后精神不佳.作为一名青春阳光好少年,atm 一直坚持与起床困难综合症作斗争.通过研究相关文献,他找 ...