1. <style type="text/css">
  2.         #div1{
  3.             width: 200px;
  4.             height: 200px;
  5.             background-color:#aaa;
  6.             color: #fa2222;
  7.         }
  8.         #div1:hover{
  9.             transform:rotateY(90deg);
  10.             transition: transform 1s;
  11.         }
  12.         #div2{
  13.             width: 200px;
  14.             height: 200px;
  15.             background-color:#444;
  16.             color: #fafafa;
  17.         }
  18.     </style>
  19.  <style type="text/css">
  20.  
  21.  #div1{
  22.  
  23.  width: 200px;
  24.  
  25.  height: 200px;
  26.  
  27.  background-color:#aaa;
  28.  
  29.  color: #fa2222;
  30.  
  31.  }
  32.  
  33.  #div1:hover{
  34.  
  35.  transform:rotateY(90deg);
  36.  
  37.  transition: transform 1s;
  38.  
  39.  }
  40.  
  41.  #div2{
  42.  
  43.  width: 200px;
  44.  
  45.  height: 200px;
  46.  
  47.  background-color:#444;
  48.  
  49.  color: #fafafa;
  50.  
  51. }
  52.  
  53. </style>

2D和3D效果的更多相关文章

  1. CSS3新特性2D、3D效果讲解

    希望这篇博客可以对你有所帮助,如果有什么技术上的问题,希望我们可以做进一步的交流,如果你觉得我哪里阐述的不正确或者你有更好的更透彻的理解,也可以联系我,我在这里随时等着你. 对于css/html是每个 ...

  2. css3的过渡、动画、2D、3D效果

    浏览器的内核: 谷歌的内核是:webkit 火狐的内核是:gecko Ie的内核是:trident 欧鹏的内核是:presto 国内浏览器的内核:webkit css3针对同一样式在不同的浏览器的兼容 ...

  3. 灵感闪现 篇 （一） 2d场景 3d 效果

    中途打断一下 ,框架文档的 更新. 另开一篇主题为 灵感闪现的 板块. 在工作生活中,总有发现新事物或新东西 而让自己突然 灵感闪现的时候,那么这个时候,我必须要抓住,并尽快把 这份灵感实现下来. 之 ...

  4. transition过渡2D、3D效果

    过渡(transition)是CSS3中具有颠覆性的特征之一,我们可以在不使用 Flash 动画或 JavaScript 的情况下,当元素从一种样式变换为另一种样式时为元素添加效果. 帧动画:通过一帧 ...

  5. 3d效果的图片轮播

    CSS3的3d变换 CSS3给我们提供了一个新的功能,那就是3d变换.3d变换和2d变换的基本API函数类似,只不过多了些在Z轴上的操作,不难使用. 但是,为了让元素拥有3d变换的功能,我们需要给他的 ...

  6. transform做2d和3d变形（css动画一）

    前言:这是笔者学习之后自己的理解与整理.如果有错误或者疑问的地方,请大家指正,我会持续更新! 有段时间我是没理清transform.translate.transition和animation之间的关 ...

  7. 2D图形如何运动模拟出3D效果

    一.先看看实现效果图 (左边的2d图片如何运动出右边3d的效果)                                      引言: 对于这个题目,真的很尴尬,不知道取啥,就想了这个题目 ...

  8. Unity制作出《超级马里奥》的2D和3D混合效果

    现在来做点别的东西.Nintendo Switch上刚推出的<超级马里奥>中,有一些关卡混合了2D和3D的画面,这种效果十分让人印象深刻.如何在Unity中实现这个效果呢? 正常情况下,摄 ...

  9. 2D、3D形变

    p.p1 { margin: 0.0px 0.0px 0.0px 0.0px; font: 17.0px Monaco; color: #a5b2b9 } span.Apple-tab-span { ...

随机推荐

  1. SpringMVC（二）高级应用

    一.参数绑定-----集合类型 二.数据回显(例如提交表单失败了,数据没有丢失) 三.上传图片 四.json数据的交互 五.restful 支持 六.拦截器

  2. 备份当前的ubuntu系统生成iso

    使用respin,步骤如下: sudo add-apt-repository ppa:sergiomejia666/respin sudo apt-get update sudo apt-get in ...

  3. HDU - 5920 Ugly Problem 求解第一个小于n的回文数

    http://acm.hdu.edu.cn/showproblem.php?pid=5920 http://www.cnblogs.com/xudong-bupt/p/4015226.html 把前半 ...

  4. Seven-segment Display 贪心选择，快速判断能否有解

    https://csacademy.com/contest/round-39/task/seven-segment-display/ 可以知道,只有1是无解 而且肯定是选出来的位数约小越好. 位数 = ...

  5. xcrun -sdk 选择

    在将FFmpeg编译成IOS版的时候,接触到编译脚本的一段(删减了部分): for ARCH in $ARCHS do if [ "$ARCH" = "i386" ...

  6. Java算法面试题 一个顺子带一对

    打牌里面经常出现的5张牌,一个顺子带一对,给你五张牌,比如:1,2,2,2,3 或者 5,6,7,4,4 或者 2,4,3,5,5 或者 7,5,9,6,9 ,这种情况就符合一个顺子带一对,则返回 t ...

  7. 《Head First 设计模式》之单件模式

    单件模式(Singleton) ——确保一个类只有一个实例,并提供全局访问点. 有一些对象其实我们只需要一个,比如线程池.缓存.对话框.处理偏好设置和注册表的对象.日志对象.如果制造出多个实例,就会导 ...

  8. ZR18提高5解题报告

    不想说啥了,比赛期间智商全程下线 A 设$f[i][j]$表示前$i$个位置,前缀和为$j$的方案数,转移的时候该位置放了什么,以及该位置之前的和是多少. 发现第二维可以前缀和优化. 不用管代码里的f ...

  9. ajax 的dataType

    这个问题已经碰到过好几次,经常自己挖坑,自己跳,而且还老是犯同样的错.一直纠结 明明其他地方得到的数据格式是对的.为什么这里就是不行.就是自己有洁癖去掉了  dataType:"json&q ...

  10. JavaScript获取URL参数公共方法

    写一个JavaScript获取URL参数的通用方法,可以把它放到常用方法的JS文件中调用,直接上代码例子,新手可以学习一下! <!DOCTYPE html> <html lang=& ...