参考

①张鑫旭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. 六、yarn运行模式

    简介 spark的yarn运行模式根据Driver在集群中的位置分成两种: 1)yarn-client 客户端模式 2)yarn-cluster 集群模式 yarn模式和standalone模式不同, ...

  2. memcache 学习笔记

    Memcached是国外社区网站LiveJournal的开发团队开发的高性能的分布式内存缓存服务器.一般的使用目的是,通过缓存数据库查询结果,减少数据库访问次数,以提高动态Web应用的速度.提高可扩展 ...

  3. 撩课-Web大前端每天5道面试题-Day3

    1. javascript的typeof返回哪些数据类型? 答案: undefined string boolean number symbol(ES6) Object Function 2. 列举3 ...

  4. spring data jpa（一）

    第1章     Spring Data JPA的快速入门 1.1   需求说明 Spring Data JPA完成客户的基本CRUD操作 1.2   搭建Spring Data JPA的开发环境 1. ...

  5. POJ 1258（最小生成树+知识）

    用kruskal算法,利用w[i]给r[i]间接排序,从而r[i]可以按照边大小保存序号,同时要判断是否在一个集合里面 #include <cstdio> #include <ios ...

  6. json的省市联动

    1 <%@ page contentType="text/html;charset=UTF-8" language="java" %> 2 < ...

  7. bzoj P3884 上帝与集合的正确用法

    Description   根据一些书上的记载,上帝的一次失败的创世经历是这样的: 第一天, 上帝创造了一个世界的基本元素,称做“元”. 第二天, 上帝创造了一个新的元素,称作“α”.“α”被定义为“ ...

  8. Java内存模型（JMM）以及 垃圾回收机制 小结

    内存模型: 内存模型描述了程序中各个变量(实例域.静态域和数组元素)之间的关系,以及在实际计算机系统中将变量存储到内存和从内存中取出变量这样的底层细节,对象最终是存储在内存里面的,这点没有错,但是编译 ...

  9. OSMC Vs. OpenELEC Vs. LibreELEC – Kodi Operating System Comparison

    Kodi's two slim-and-trim kid brothers LibreELEC and OpenELEC were once great solutions for getting t ...

  10. android studio 3.0 以上 查看sharedpreference

    android studio 3.0 以上 查看sharedpreference 点击android studio 右侧的device file explore,找到data / data 目录: 找 ...