简单几步用纯CSS3实现3D翻转效果


Posted in HTML / CSS onJanuary 17, 2019

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

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

// 本示例均使用Sass语法
.block {
  width: 200px;
  height: 200px;
  background: brown;
  cursor: pointer;
  transition: 0.8s;
  &:hover {
    transform: rotateY(180deg);
  }
}

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

简单几步用纯CSS3实现3D翻转效果

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

简单几步用纯CSS3实现3D翻转效果

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

// html部分
<div class="block">
    <div class="block-in"></div>
</div>
// CSS部分
.block {
  width: 200px;
  height: 200px;
  cursor: pointer;
 
  &-in {
    background: brown;
    height: 100%;
    transition: 0.8s;
  }
  
  &:hover .block-in {
    transform: rotateY(180deg);
  }
}

此时效果没变,如下:

简单几步用纯CSS3实现3D翻转效果

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

.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);
  }
}

最终实现效果如下:

简单几步用纯CSS3实现3D翻转效果

最终我们 总结一下思路

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

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

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

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

HTML / CSS 相关文章推荐
CSS3 calc()会计算属性详解
Feb 27 HTML / CSS
CSS3圆角和渐变2种常用功能详解
Jan 06 HTML / CSS
什么是CSS3 HSLA色彩模式?HSLA模拟渐变色条
Apr 26 HTML / CSS
css sprite简单实例
May 23 HTML / CSS
HTML5 Web 存储详解
Sep 16 HTML / CSS
一个不错的HTML5 Canvas多层点击事件监听实例
Apr 29 HTML / CSS
HTML5 Canvas 绘图——使用 Canvas 绘制图形图文教程 使用html5 canvas 绘制精美的图
Aug 31 HTML / CSS
html5如何在Canvas中实现自定义路径动画示例
Sep 18 HTML / CSS
AmazeUI 模态窗口的实现代码
Aug 18 HTML / CSS
HTML5适合的情人节礼物有纪念日期功能
Jan 25 HTML / CSS
HTML5来实现本地文件读取和写入的实现方法
May 25 HTML / CSS
POST提交数据常见的四种方式
Jan 18 HTML / CSS
css3实现3D文本悬停改变效果的示例代码
Jan 16 #HTML / CSS
css3实现元素环绕中心点布局的方法示例
Jan 15 #HTML / CSS
CSS3改变浏览器滚动条样式
Jan 04 #HTML / CSS
浅谈CSS3 动画卡顿解决方案
Jan 02 #HTML / CSS
纯CSS3实现漂亮的input输入框动画样式库(Text input love)
Dec 29 #HTML / CSS
10分钟入门CSS3 Animation
Dec 25 #HTML / CSS
10分钟理解CSS3 Grid布局
Dec 20 #HTML / CSS
You might like
人大复印资料处理程序_输入篇
2006/10/09 PHP
用PHP实现多级树型菜单
2006/10/09 PHP
PHP return语句另类用法不止是在函数中
2014/09/17 PHP
ThinkPHP基于PHPExcel导入Excel文件的方法
2014/10/15 PHP
浅谈PHP中Stream(流)
2015/06/08 PHP
php使用ftp远程上传文件类(完美解决主从文件同步问题的方法)
2016/09/23 PHP
Zend Framework入门教程之Zend_Session会话操作详解
2016/12/08 PHP
Yii框架引用插件和ckeditor中body与P标签去除的方法
2017/01/19 PHP
鼠标右击事件代码(asp.net后台)
2011/01/27 Javascript
javascript写的一个模拟阅读小说的程序
2014/04/04 Javascript
详解JavaScript中的客户端消息框架设计原理
2015/06/24 Javascript
javascript遇到html5的一些表单属性
2015/07/05 Javascript
js计算时间差代码【包括计算,天,时,分,秒】
2016/04/26 Javascript
如何判断Javascript对象是否存在的简单实例
2016/05/18 Javascript
BootStrap智能表单实战系列(三)分块表单配置详解
2016/06/13 Javascript
jQuery ajax中使用confirm,确认是否删除的简单实例
2016/06/17 Javascript
AngularJS实现单独作用域内的数据操作
2016/09/05 Javascript
基于angular中的重要指令详解($eval,$parse和$compile)
2016/10/21 Javascript
JavaScript正则获取地址栏中参数的方法
2017/03/02 Javascript
VUE使用vuex解决模块间传值问题的方法
2017/06/01 Javascript
浅谈js闭包理解
2019/04/01 Javascript
JS中的算法与数据结构之二叉查找树(Binary Sort Tree)实例详解
2019/08/16 Javascript
原生JS实现无缝轮播图片
2020/06/24 Javascript
Python实现批量修改文件名实例
2015/07/08 Python
Python+django实现文件下载
2016/01/17 Python
python通过elixir包操作mysql数据库实例代码
2018/01/31 Python
Django中使用Celery的教程详解
2018/08/24 Python
代码实例讲解python3的编码问题
2019/07/08 Python
django Layui界面点击弹出对话框并请求逻辑生成分页的动态表格实例
2020/05/12 Python
英国领先的游戏零售商:GAME
2019/09/24 全球购物
技校毕业生的自我评价
2013/12/27 职场文书
婚礼答谢礼品
2015/01/20 职场文书
CocosCreator如何实现划过的位置显示纹理
2021/04/14 Javascript
Python进阶学习之带你探寻Python类的鼻祖-元类
2021/05/08 Python
Python日志模块logging用法
2022/06/05 Python
python中pd.cut()与pd.qcut()的对比及示例
2022/06/16 Python