简单几步用纯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开启硬件加速的使用和坑
Aug 21 HTML / CSS
CSS3实现的闪烁跳跃进度条示例(附源码)
Aug 19 HTML / CSS
CSS3的first-child选择器实战攻略
Apr 28 HTML / CSS
CSS3条纹背景制作的实战攻略
May 31 HTML / CSS
css3实现背景动态渐变效果
Dec 10 HTML / CSS
HTML5 canvas画矩形时出现边框样式不一致的解决方法
Oct 14 HTML / CSS
HTML5+CSS3应用详解
Feb 24 HTML / CSS
HTML5 Canvas玩转酷炫大波浪进度图效果实例(附demo)
Dec 14 HTML / CSS
详解HTML5布局和HTML5标签
Oct 26 HTML / CSS
基于HTML十秒做出淘宝页面
Oct 24 HTML / CSS
CSS实现九宫格布局(自适应)的示例代码
Feb 12 HTML / CSS
HTML5之高度塌陷问题的解决
Jun 01 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高手?学会“懒惰”的编程
2006/12/05 PHP
php中文本操作的类
2007/03/17 PHP
PHP 数组基础知识小结
2010/08/20 PHP
Yii 2.0如何使用页面缓存方法示例
2017/05/23 PHP
php封装db类连接sqlite3数据库的方法实例
2017/12/19 PHP
PHP 数组黑名单/白名单实例代码详解
2019/06/04 PHP
你所要知道JS(DHTML)中的一些技巧
2007/01/09 Javascript
js 刷新页面的代码小结 推荐
2010/04/02 Javascript
JavaScript 函数replace深入了解
2013/03/14 Javascript
Visual Studio中js调试的方法图解
2014/06/30 Javascript
extjs 分页使用jsp传递数据示例
2014/07/29 Javascript
浅谈Javascript变量作用域问题
2014/12/16 Javascript
理解javascript回调函数
2014/12/28 Javascript
jquery实现动画菜单的左右滚动、渐变及图形背景滚动等效果
2015/08/25 Javascript
js图片轮播特效代码分享
2015/09/07 Javascript
简单实现js选项卡切换效果
2016/02/03 Javascript
原生js实现回复评论功能
2017/01/18 Javascript
激动人心的 Angular HttpClient的源码解析
2017/07/10 Javascript
详解关于Vue单元测试的几个坑
2020/04/26 Javascript
在Python的Flask框架中使用模版的入门教程
2015/04/20 Python
python采用django框架实现支付宝即时到帐接口
2016/05/17 Python
Python3实现抓取javascript动态生成的html网页功能示例
2017/08/22 Python
Python统计单词出现的次数
2018/04/04 Python
pycharm新建一个python工程步骤
2019/07/16 Python
Python基于DB-API操作MySQL数据库过程解析
2020/04/23 Python
浅析Python 多行匹配模式
2020/07/24 Python
pip已经安装好第三方库但pycharm中import时还是标红的解决方案
2020/10/09 Python
python实现企业微信定时发送文本消息的示例代码
2020/11/24 Python
Python3使用tesserocr识别字母数字验证码的实现
2021/01/29 Python
matplotlib事件处理基础(事件绑定、事件属性)
2021/02/03 Python
Eclipse面试题
2014/03/22 面试题
介绍一下UNIX启动过程
2013/11/14 面试题
2014年测量员工作总结
2014/12/12 职场文书
婚礼双方父亲致辞
2015/07/27 职场文书
安全生产学习心得体会
2016/01/18 职场文书
有关花店创业的计划书模板
2019/08/27 职场文书