作为前端开发人员的必修课，CSS3翻转能带我们完成许多基本动效，本期我们将用CSS3实现hover翻转效果~

第一步非常简单，我们简单画1个演示方块，为其 添加transition和transform属性 ：

?
1
2
3
4
5
6
7
8
9
10
11
// 本示例均使用Sass语法
.block {
  width: 200px;
  height: 200px;
  background: brown;
  cursor: pointer;
  transition: 0.8s;
  &:hover {
    transform: rotateY(180deg);
  }
}

我们看一看这时候的效果：

这里 需要注意 的是： transition属性要写在.block上而不是hover上 ，如果只在hover上写transition，则鼠标移出时并没有transition的过渡效果，如果我们只将transition写在hover上：

第二步比较关键：我们不难发现始终在1个平面上翻转，不够有立体感，因此我们需要稍加改变思路—— 用2层div嵌套css3背景动画

?
1
2
3
4
// html部分
<div class="block">
    <div class="block-in"></div>
</div>
?
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
// CSS部分
.block {
  width: 200px;
  height: 200px;
  cursor: pointer;
  
  &-in {
    background: brown;
    height: 100%;
    transition: 0.8s;
  }
   
  &:hover .block-in {
    transform: rotateY(180deg);
  }
}

此时效果没变，如下：

这个时候 关键的1步 来了：我们需要 给外层添加perspective和transform-style属性 css3导航菜单 ，为整个动画增添3D变形效果：

?
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
.block {
  width: 200px;
  height: 200px;
  cursor: pointer;
  /* 3D变形 */
  transform-style: preserve-3d;
  -webkit-perspective: 1000;
  -moz-perspective: 1000;
  -ms-perspective: 1000;
  perspective: 1000;
  
  &-in {
    background: brown;
    height: 100%;
    transition: 0.8s;
  }
  
  &:hover .block-in {
    transform: rotateY(180deg);
  }
}

最终实现效果如下：

最终我们 总结一下思路 ：

1.建立内外2层div，鼠标 hover 到外层时，内层div添加翻转css3 transform: rotateY(180deg)

2.注意将 transition 属性添加到需要翻转的div上，而不是 hover 时

3.外层div添加 perspective 和 transform-style 属性，最终实现3D翻转效果

最新文章

  1. Python数据结构与算法--List和Dictionaries
  2. 15.python笔记之psutil模块
  3. 在 CentOS 中编译安装 VIM 7.3
  4. arcgis android 加载google切片 天地图切片 并且能进行缓存
  5. 微信小程序，超能装的实例教程
  6. 使用IWMS的网站打开显示“未能加载文件或程序集”，解决方案
  7. rabbitmq (一)用法
  8. 网络编程_UDP协议_发送端与接收端
  9. Spring boot 定制自己的错误
  10. [leetcode]股票题型123
  11. linux 下 etc常用配置信息
  12. Android之MVC模式的使用
  13. python中的__name__==&#39;__main__&#39;如何简单理解（一）
  14. github下载源码的三种方式
  15. RabbitMQ （一）
  16. linux远程win7教程
  17. Python基础(3) - 数据类型:5字典类型
  18. Sqoop-将MySQL数据导入到hive orc表
  19. java多线程二之线程同步的三种方法
  20. 【bzoj1455】罗马游戏 可并堆+并查集

热门文章

  1. Python(Django)项目与Apache的管理
  2. 基于Kafka Connect框架DataPipeline在实时数据集成上做了哪些提升？
  3. linux下c编程 基础
  4. sql语句查询执行顺序
  5. npm安装项目出错
  6. Windows上使用Git托管代码到Coding
  7. mysql left join 左连接查询关联n多张表
  8. 图形验证码知识点整理 Object.prototype.toString.call()等
  9. 关于Kafka配额的讨论(2)
  10. orcl数据库命令行怎么导入dmp格式的文件