最近学了妙味的css3的动画，2D,3D的都有，先写一个最简单的3d翻转效果，鼠标移入div，正反面翻转效果。 
注意点有：

  1. 要给正反面外面加个父级；
  2. transform-style: preserve-3d;是加在正反面的父级，使动画具有3d的效果；但是ie11并不支持preserve-3d
  3. perspective也要加在父级上，使动画具有透视效果；
  4. 要给父级也加上宽高，否则动画没有效果

<style>
#box{
margin: 70px auto;
width: 300px;
height: 200px; //父级要加宽高，否则旋转基点会很离谱
transform-style: preserve-3d; //preserve-3d加在父级上
transform-origin: 50px 100px;
transition: 0.3s linear;
position: relative;
perspective: 500px; //perspective也要加在父级上
}
#box div{
width: 300px;
height: 200px;
font: 50px/100px arial;
text-align: center;
position: absolute;
}
#box div:nth-of-type(1){
background: url(1.jpg);
}
#box div:nth-of-type(2){
background: url(2.jpg);
transform: translatez(1px);
}
#box:hover{
transform: rotateY(180deg);
}
</style>
<script>
</script>
</head>
<body>
<div id="box">
</div>
</div>
</div>
</body>

【巩固】CSS3的3D动画 ——3D旋转（1）的更多相关文章

  1. 【原】CSS3的3D动画 ——3D旋转之骰子样式的钟表（2）下.md

    之前看到智能社主页的那个骰子样式的钟表,最近研究了一下,虽然没有仔细看他是怎么做的,但是学了css3的动画之后想自己尝试着写一下,用到的原理可能和智能社网站的不太一样,我自己主要用到了css3和js. ...

  2. 【学】CSS3的3D动画 ——3D旋转之骰子样式的钟表（2）上

    这个是3D旋转的进阶版,是一个类似与骰子的正方体.这个版本只有秒数的个位数,还没有写整个钟表,下面那个版本好好想想该怎么写 这个效果需要用到transform-style: preserve-3d. ...

  3. CSS3 动画3D视角下 旋转圆环

    首先是  transform 属性: transform 属性向元素应用 2D 或 3D 转换.该属性允许我们对元素进行旋转.缩放.移动或倾斜. 加上对应属性则可得到3D透视效果下的形态 本次以圆形( ...

  4. 3D Grid Effect – 使用 CSS3 制作网格动画效果

    今天我们想与大家分享一个小的动画概念.这个梦幻般的效果是在马库斯·埃克特的原型应用程序里发现的​​.实现的基本思路是对网格项目进行 3D 旋转,扩展成全屏,并呈现内容.我们试图模仿应用程序的行为,因此 ...

  5. 如何制作css3的3d动画——以骰子旋转为例，详解css3动画属性

    首先先来看两个用css3实现的炫酷的3d动画效果 1 2 3 4 5   6 你没看错,这个炫酷的效果都是用css3实现的. 下面是动画实现所需要用到的几个css3属性. 1.perspective: ...

  6. CSS3中的3D动画实现(钟摆、魔方)--实现代码

    CSS3中的3D动画实现(钟摆.魔方) transition-property 过渡动画属性  all|[attr] transition-duration 过渡时间 transition-delay ...

  7. [web前端] css3 transition属性实现3d动画效果

    cp from : https://www.cnblogs.com/chrxc/p/5123375.html transition属性是一个很强大的3d动画属性,我动手试了一下,很多在网上很火的网页动 ...

  8. css3 transition属性实现3d动画效果

    transition属性是一个很强大的3d动画属性,我动手试了一下,很多在网上很火的网页动画都可以用这个属性实现,只能说这个属性是在是太强大啦,本人在学习次属性之后才知道自己对css3的认识还是偏少, ...

  9. css3图书3D动画

    css3图书3D动画,css3,立体特效,旋转效果,3D动画,css3图书3D动画是一款基于css3实现的立体旋转3D图书动画特效. 代码下载页:http://www.huiyi8.com/sc/71 ...

随机推荐

  1. osg,vtk,ogre的区别

    osg使用过一年,阅读过一部分源代码,vtk也断续使用过三四年了,ogre研究的比较深入,基本上比较熟悉它的整体结构,说说个人的看法 vtk是一个算法库,里面包括了很多挺不错的算法,如果做有限元云图, ...

  2. uva 1001（最短路）

    题意:在一个三维的奶酪里面有n(n<=100)个洞,老鼠A想到达老鼠B的位置,在洞里面可以瞬间移动,在洞外面的移动速度为10秒一个单位,求最短时间 题解:如果两个洞相交,那么d[i][j]=0: ...

  3. Windows Store App 访问应用内部文件

    访问应用程序内部的文件可以使用多种不同的方法,13.1节中已经介绍过相关的方法,除此之外,还可以使用文件的URI地址直接对文件进行检索,这种访问方式需要用到StorageFile类的静态方法GetFi ...

  4. NetworkComms V3 之同步收发数据

    NetworkComms网络通信框架序言 NetworkComms通信框架,是一款来自英国的c#语言编写的通信框架,历时6年研发,成熟稳定,性能可靠. NetworkComms v3的核心功能在一定程 ...

  5. mysql 中execute、executeQuery和executeUpdate之间的区别

    在用纯JSP做一个页面报警功能的时候习惯性的用executeQuery来执行SQL语句,结果执行update时就遇到问题,语句能执行,但返回结果出现问题,另外还忽略了executeUpdate的返回值 ...

  6. ubuntu下命令行打开pdf/doc/ppt文件

    1  打开pdf evince   *.pdf 2 打开ppt libreoffice  *.ppt3 打开doc libreoffice  *.doc

  7. Objective-C学习笔记－第三天(1)

    今天开始用oc写iOS程序,遇到的问题有 1.在不同的类使用类的方法或者访问类的属性的时候(公开的方法或者属性),方法或者属性必须在类头文件中声明. 2.对象类型的声明以及定义需要用*,表明这个是一个 ...

  8. 进程间通信IPC：消息队列，信号量，共享内存

    2015.3.4星期三 阴天 进程间通信:IPC 文件对象:记录文件描述符,文件开关等 IPC标示符:系统全局的流水号两个进程要通信,打开的是唯一的对象进行通讯,通过key操作 XSI IPC:消息队 ...

  9. WindowsPhone开发—— 使用手绘图片做景区导览地图

    前些日子在做景区App遇到需求,使用手绘图片做一个简易的地图,支持放大缩小平移以及显示景点Mark,安卓上可以使用一个叫做“mAppWidget”的开源库来完成,WP上有人建议用ArcGIS,但是考虑 ...

  10. python3.2 + PyQt4界面开发hello world

    需要先安装python3.2 然后安装python3.2对应的PyQt4界面库版本 import sys from PyQt4 import QtGui , QtCore app = QtGui.QA ...