参考

①张鑫旭http://www.zhangxinxu.com/wordpress/2012/09/css3-3d-transform-perspective-animate-transition/

②CODEPEN优秀 圣诞老人https://codepen.io/Alireza29675/pen/KwgwMy

代码

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>Reverse</title>

</head>

<style>

    .divin{

        /*perspective: 800px;*/

        width: 250px;

        height: 350px;

    }

    .down{

        /*perspective: 800px;*/

        width: 250px;

        height: 350px;

        position: relative;

        top:-350px;

        transform:rotateY(180deg);

    }

    .out{

        backface-visibility: hidden;

        position: absolute;

        left: 800px;

        perspective: 800px;

        width: 250px;

        height: 350px;

        transform-style: preserve-3d;

        transition: transform 0.5s linear;

    }

</style>

<body>

    <div class="out">

    <div class="divin" onclick="rotate()"><img src="C:\Users\Administrator\Desktop\ife%2F任务四设计稿\任务四设计稿\正面.jpg" alt="up"></div>

    <div class="down"><img src="C:\Users\Administrator\Desktop\ife%2F任务四设计稿\任务四设计稿\反面.jpg" alt="down"></div>

    </div>

</body>

<script>

    function rotate(){

    var b1 = document.querySelector(".out");

    b1.style.transform = "rotateY(180deg)";

}

</script>

</html>

主要点

①perspective属性

②transform-style:preserve-3d;

③backface-visibility:hidden

No.4 - 3D 空间的卡片翻转动效的更多相关文章

  1. NeHe OpenGL教程 第五课：3D空间

    转自[翻译]NeHe OpenGL 教程 前言 声明,此 NeHe OpenGL教程系列文章由51博客yarin翻译(2010-08-19),本博客为转载并稍加整理与修改.对NeHe的OpenGL管线 ...

  2. Direct3D 11 Tutorial 4: 3D Spaces_Direct3D 11 教程4：3D空间

    概述 在上一个教程中,我们在应用程序窗口的中心成功渲染了一个三角形. 我们没有太注意我们在顶点缓冲区中拾取的顶点位置. 在本教程中,我们将深入研究3D位置和转换的细节. 本教程的结果将是渲染到屏幕的3 ...

  3. WebGL和ThreeJs学习6--射线法确定3D空间中所选物体

    一.在 threejs 中如何确定下图3D空间中鼠标点击位置的 object 对象? 二.射线法确定步骤及代码 //Three.js提供一个射线类Raycaster来拾取场景里面的物体.更方便的使用鼠 ...

  4. 视觉SLAM的数学基础 第一篇 3D空间的位置表示

    视觉SLAM中的数学基础 第一篇 3D空间的位置表示 前言 转眼间一个学期又将过去,距离我上次写<一起做RGBD SLAM>已经半年之久.<一起做>系列反响很不错,主要由于它为 ...

  5. OpenGL学习进程（9）在3D空间的绘制实例

        本节将演示在3D空间中绘制图形的几个简单实例:     (1)在3D空间内绘制圆锥体: #include <GL/glut.h> #include <math.h> # ...

  6. 第05课 OpenGL 3D空间

    3D空间: 我们使用多边形和四边形创建3D物体,在这一课里,我们把三角形变为立体的金子塔形状,把四边形变为立方体. 在上节课的内容上作些扩展,我们现在开始生成真正的3D对象,而不是象前两节课中那样3D ...

  7. 3D空间中射线与三角形的交叉检測算法

    引言 射线Ray,在3D图形学中有非常多重要的应用.比方,pick操作就是使用射线Ray来实现的,还有诸如子弹射线的碰撞检測等等都能够使用射线Ray来完毕. 所以,在本次博客中,将会简单的像大家介绍下 ...

  8. 3D空间中射线与三角形的交叉检测算法【转】

    引言 射线Ray,在3D图形学中有很多重要的应用.比如,pick操作就是使用射线Ray来实现的,还有诸如子弹射线的碰撞检测等等都可以使用射线Ray来完成.所以,在本次博客中,将会简单的像大家介绍下,如 ...

  9. 数学基础-3D空间的位置表示

    转自:http://www.cnblogs.com/gaoxiang12/p/5113334.html 刚体运动 本篇讨论一个很基础的问题:如何描述机器人的位姿.这也是SLAM研究的一个很基本的问题. ...

随机推荐

  1. 01 使用JavaScript原生控制div属性

    写在前面: 因对前端开发感兴趣,于是自学前端技术,现在已经会HTML.CSS.JavaScript基础技术.但水平处于小白阶段,在网上找一些小项目练练手,促进自己的技术成长.文章记录自己的所思所想,以 ...

  2. MyBatis学习(三)---MyBatis和Spring整合

    想要了解MyBatis基础的朋友可以通过传送门: MyBatis学习(一)---配置文件,Mapper接口和动态SQL http://www.cnblogs.com/ghq120/p/8322302. ...

  3. Hibernate入门（四）—— 查询

    一.Hibernate查询 1.Hibernate检索(查询)方式的分类 OID检索 :根据主键查询,get/load 对象导航检索 :通过一个对象获得其关联对象.[重点] Category cate ...

  4. 关于 Table 表格那些三两事儿

    引言 实现下列表格样式,嵌套与form表单中提交信息,为了让自己的表格可以“ 随心所欲 ” 变换自己的形式,需要两个重要的td 属性colspan 列合并 以及 rowspan 行合并 来实现,表格宽 ...

  5. C#编写强大的SQL Server数据库自动备份服务

    数据库自动备份服务,带配置,还算可以吧 周末抽时间,编写了一个这样的工具,可以让,对数据库不了解或不熟悉的人,直接学会使用备份,省时省力,同样,我也将一份,通过脚本进行备份的,也奉献上来, 通过sql ...

  6. 简单使用git上传代码

    1,首先在github上面创建一个仓库 2,在本地目录中右击,选择git bash 3,将github上的仓库克隆到本地目录,(这个就是您的仓库) git clone https://github.c ...

  7. Centos7 下安装Apache2 + MySQL + PHP7

    Apache 1.安装Apache yum install httpd 2.设置服务器开机自动启动Apache systemctl enable httpd.service 若要验证是否自动启动可在重 ...

  8. Linux（Ubuntu16.04）下添加新用户

    某些情况下,Ubuntu 使用useradd 新用户名,在home 文件夹下面看不到新创建的用户文件夹,例如: 发现找不到,spark的文件夹,因此将采用下面方式重新建立首先删除spark用户 若想给 ...

  9. C/C++遍历进程和进程ID的小工具

    原文:http://blog.csdn.net/qq78442761/article/details/54646010 当我们写某些具有破坏性的程序时就需要对进程进行遍历和提取ID 对于上述功能,我们 ...

  10. Binary Tree Inorder/Preorder Traversal 返回中序和前序/遍历二叉树的元素集合

    给定一个二叉树,以集合方式返回其中序/先序方式遍历的所有元素. 有两种方法,一种是经典的中序/先序方式的经典递归方式,另一种可以结合栈来实现非递归 Given a binary tree, retur ...