简单几步用纯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 相关文章推荐
HTML5如何适配 iPhone IOS 底部黑条
Mar 09 HTML / CSS
网页布局中CSS样式无效的十个重要原因详解
Aug 10 HTML / CSS
css3实现文字首尾衔接跑马灯的示例代码
Oct 16 HTML / CSS
HTML5 CSS3新的WEB标准和浏览器支持
Jul 16 HTML / CSS
整理的15个非常有用的 HTML5 开发教程和速查手册
Oct 18 HTML / CSS
html5使用canvas画一条线
Dec 15 HTML / CSS
HTML5所有标签汇总及标签意义解释
Mar 12 HTML / CSS
在HTML5中使用MathML数学公式的简单讲解
Feb 19 HTML / CSS
Html5实现用户注册自动校验功能实例代码
May 24 HTML / CSS
canvas学习和滤镜实现代码
Aug 22 HTML / CSS
html table呈现个人简历以及单元格宽度失效的问题解决
Jan 22 HTML / CSS
html网页引入svg图片的4种方式
Aug 05 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
PHP删除数组中的特定元素的代码
2012/06/28 PHP
CodeIgniter中使用cookie的三种方式详解
2014/07/18 PHP
十幅图告诉你什么是PHP引用
2015/02/22 PHP
ThinkPHP3.2框架自定义配置和加载用法示例
2018/06/14 PHP
thinkphp5使用无限极分类
2019/02/18 PHP
php实现获取近几日、月时间示例
2019/07/06 PHP
通过jquery还原含有rowspan、colspan的table的实现方法
2012/02/10 Javascript
jQuery 淡出一个图像到另一个图像的实现代码
2013/06/12 Javascript
js键盘事件的keyCode
2014/07/29 Javascript
如何调试异步加载页面里包含的js文件
2014/10/30 Javascript
通过node-mysql搭建Windows+Node.js+MySQL环境的教程
2016/03/01 Javascript
实例剖析AngularJS框架中数据的双向绑定运用
2016/03/04 Javascript
JS及PHP代码编写八大排序算法
2016/07/12 Javascript
JS实现输入框提示文字点击时消失效果
2016/07/19 Javascript
Webpack打包css后z-index被重新计算的解决方法
2017/06/18 Javascript
jquery实现一个全局计时器(商城可用)
2017/06/30 jQuery
jQuery动画_动力节点节点Java学院整理
2017/07/04 jQuery
提升页面加载速度的插件InstantClick
2017/09/12 Javascript
基于复选框demo(分享)
2017/09/27 Javascript
详解微信小程序Page中data数据操作和函数调用
2017/09/27 Javascript
jQuery实现导航样式布局操作示例【可自定义样式布局】
2018/07/24 jQuery
vue-cli整合vuex的时候,修改actions和mutations,实现热部署的方法
2018/09/19 Javascript
Element输入框带历史查询记录的实现示例
2019/01/15 Javascript
javascript的this关键字详解
2019/05/20 Javascript
如何通过javaScript去除字符串两端的空白字符
2020/02/06 Javascript
vue axios请求成功却进入catch的原因分析
2020/09/08 Javascript
python3图片转换二进制存入mysql
2013/12/06 Python
pandas去除重复列的实现方法
2019/01/29 Python
Python 调用 Outlook 发送邮件过程解析
2019/08/08 Python
keras 自定义loss层+接受输入实例
2020/06/28 Python
HTML5学习笔记之History API
2015/02/26 HTML / CSS
AJAX应用和传统Web应用有什么不同
2013/08/24 面试题
普通员工辞职信
2014/01/17 职场文书
网络编辑岗位职责范本
2014/02/10 职场文书
2014年物流工作总结
2014/11/25 职场文书
2016关于军训的心得体会
2016/01/11 职场文书