简单几步用纯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中的选择符
Oct 17 HTML / CSS
CSS3属性选择符介绍
Oct 17 HTML / CSS
需要知道的CSS3动画技术
Jan 01 HTML / CSS
一款利用纯css3实现的360度翻转按钮的实例教程
Nov 05 HTML / CSS
详解css3 Transition属性(平滑过渡菜单栏案例)
Sep 05 HTML / CSS
CSS3 实现footer 固定在底部(无论页面多高始终在底部)
Oct 15 HTML / CSS
HTML5新增的表单元素和属性实例解析
Jul 07 HTML / CSS
浅析移动设备HTML5页面布局
Dec 01 HTML / CSS
Html5 web本地存储实例详解
Jul 28 HTML / CSS
详解HTML5中的拖放事件(Drag 和 drop)
Nov 14 HTML / CSS
HTML CSS 一个标签实现带动画的抖音LOGO
Apr 26 HTML / CSS
css中:last-child不生效的解决方法
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分页初探 一个最简单的PHP分页代码的简单实现
2016/06/21 PHP
PHP使用php-resque库配合Redis实现MQ消息队列的教程
2016/06/29 PHP
一个js写的日历(代码部分网摘)
2009/09/20 Javascript
理解Javascript_13_执行模型详解
2010/10/20 Javascript
jQuery 获取URL的GET参数值的小例子
2013/04/18 Javascript
基于javascript的COOkie的操作实现只能点一次
2014/12/26 Javascript
node通过express搭建自己的服务器
2017/09/30 Javascript
JavaScript屏蔽Backspace键的实现代码
2017/11/02 Javascript
nodejs多版本管理总结
2018/04/03 NodeJs
Vue 组件复用多次自定义参数操作
2020/07/27 Javascript
vue实现路由懒加载的3种方法示例
2020/09/01 Javascript
JavaScript数组类型Array相关的属性与方法详解
2020/09/08 Javascript
详解Vue2的diff算法
2021/01/06 Vue.js
[02:05]2014DOTA2国际邀请赛 BBC外卡赛赛后总结
2014/07/09 DOTA
Django框架中数据的连锁查询和限制返回数据的方法
2015/07/17 Python
Python基于正则表达式实现检查文件内容的方法【文件检索】
2017/08/30 Python
Python文件监听工具pyinotify与watchdog实例
2018/10/15 Python
对Python 获取类的成员变量及临时变量的方法详解
2019/01/22 Python
Django之编辑时根据条件跳转回原页面的方法
2019/08/21 Python
详解一种用django_cache实现分布式锁的方式
2019/09/01 Python
Pytorch 卷积中的 Input Shape用法
2020/06/29 Python
Python读取图像并显示灰度图的实现
2020/12/01 Python
探索HTML5本地存储功能运用技巧
2016/03/02 HTML / CSS
MIXIT官网:俄罗斯最大的化妆品公司之一
2020/01/25 全球购物
自我评价的写作规则
2014/01/06 职场文书
干部下基层实施方案
2014/03/14 职场文书
2014卖家双十一活动策划书
2014/09/29 职场文书
经理岗位职责范本
2015/04/15 职场文书
幼儿园教研工作总结2015
2015/05/12 职场文书
建党伟业电影观后感
2015/06/01 职场文书
财务年终工作总结大全
2019/06/20 职场文书
《敬重卑微》读后感3篇
2019/11/26 职场文书
详解Vue的sync修饰符
2021/05/15 Vue.js
python基础之文件处理知识总结
2021/05/23 Python
python解析json数据
2022/04/29 Python
Android studio 简单计算器的编写
2022/05/20 Java/Android