参考

①张鑫旭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. java调用 C# webservice接口

    java调用webservice接口方式有多种,本人很懒,测试一种满足我的需求,故为试验其他方法,仅供参考 一:工具 MyEclipse,C#编码发布的webservice接口 二:步骤 1.打开my ...

  2. axios中的qs

    qs是一个npm仓库所管理的包,可通过npm install qs命令进行安装. 1. qs.parse()将URL解析成对象的形式 const Qs = require('qs'); let url ...

  3. NGINX本地服务器解析域名

    1.找到hosts文件 ,添加需要解析的域名 2.在cmd命令窗口中检测解析是否生效 3 找到本地服务器的域名配置文件:添加绑定的域名,更改访问的目录 4.添加pathinfo.隐藏index.php ...

  4. 解决nexus3报Cannot open local storage 'component' with mode=rw的异常问题

    起因:正常使用的公司Maven.Docker私有仓库,突然镜像不能推送,返回getsockopt: connection refused,用docker客户端登录也是返回同样的错误,查看nexus3日 ...

  5. GDAL2.0编译——32位和64位

    准备工作: Source下载,这里下载对应的GDAL版本 https://trac.osgeo.org/gdal/wiki/DownloadSource 懒得编译也可以在这里下载对应版本 https: ...

  6. PRINCE2认证与其他项目管理认证标准有何不同？

    国际项目管理协会 (IPMA)根据国际能力基线建立了一种国际公认的标准,并由其各国协会译成各国语言.这是IPMA四级证书的基础,现在已在全世界推广.可喜的是,PRINCE2与这个标准高度一致. 美国项 ...

  7. androidandroid中的通过网页链接打开本地app

    http://blog.csdn.net/zjlovety/article/details/54847980 <html> <head> <meta http-equiv ...

  8. Excel 操作总结

    1.excel 表格中换行:Alt+Enter; 2.Excel2003以上版本设置下拉菜单     DATA->Data Validation ->Data Validation -&g ...

  9. 秒杀多线程第一篇 多线程笔试面试题汇总 ZZ 【多线程】

    http://blog.csdn.net/morewindows/article/details/7392749 系列前言 本系列是本人参加微软亚洲研究院,腾讯研究院,迅雷面试时整理的,另外也加入一些 ...

  10. [翻译] Shimmer

    Shimmer Shimmer is an easy way to add a shimmering effect to any view in your app. It's useful as an ...