backface-visibility 翻转特效

目前这个属性支持两个值，兼容性并不是很好

1、backface-visibility：visible
默认值，背面朝向用户时可见

2、backface-visibility：hidden
背面朝向用户时不可见。

下面是各浏览器的兼容性

卡片翻转特效的实现过程

一、创建一个容器

<div class="card">
</div>

因为是翻转卡片，所以为了保证正面反面可以重叠，我们需要把正反面放在同一个容器内并为父容器设置position: relative;

.card {width: 720px;height: 720px;position: relative;}

二、在容器内创建正面与反面

<div class="card"> <div class="front"><img src="logo.png" /></div><div class="back"><p>滕王高阁临江渚，佩玉鸣鸾罢歌舞。</p><p>画栋朝飞南浦云，珠帘暮卷西山雨。</p><p>闲云潭影日悠悠，物换星移几度秋。</p><p>阁中帝子今何在？槛外长江空自流。</p></div>
</div>

然后我们需要为正反面设置position: absolute;让正反面重叠在一起

 .front,.back {background-image: linear-gradient(to bottom right, #96e077, #2daa84);position: absolute;top: 0;left: 0;width: 100%;height: 100%;}

初始状态
front作为正面，那他初始状态应是：翻转角度为0 ，并且设置了
backface-visibility: hidden;

.front {backface-visibility: hidden;transition: transform 500ms linear;transform: rotateY(0deg)}

back是背面，那他的初始状态肯定是: 设置了翻转角度为180，并且设置了
backface-visibility: hidden;

.back {transform: rotateY(180deg);backface-visibility: hidden;transition: transform 300ms linear;}

我们顺便给正面与背面设置上过渡效果transition确保正面与背面进行翻转时有动画过渡，不会太生硬

动画效果
transform是css3里面一个可以让元素应用 2D 或 3D 转换的一个属性。这个属性允许我们对元素进行旋转、缩放、移动或倾斜。

然后我们需要用到的是transform: rotateY(angle);

这个属性可以让定义的元素沿着 Y 轴的 3D 旋转。

我们给父元素.card在鼠标悬浮的时候，给正反面添加上反转，让正反面调换位置

.card:hover .front {transform: rotateY(-180deg);}.card:hover .back {transform: rotateY(0deg);
}

效果图

backface-visibility 翻转特效相关推荐

类似 Google Tips 页面的卡片式提示和翻转特效
这款 jQuery 插件用于实现类似 Google Tips 页面的卡片式提示和翻转的交互特效.你可以根据自己的需要定制动画效果参数,定义回调函数来控制行为.因为使用了 CSS3,所以只支持 Chro ...
html5图片自动翻转特效,CSS3带动态阴影效果的3D图片翻转特效
在前不久我们讲解了CSS3 3D卡片翻转技术,在这篇文章中,我们要跟进一步,在卡片3D翻转的基础上,制作卡片的动态阴影效果.最终效果是鼠标滑过图片时,卡片会3D翻转,图片的背面显示图片的标题,在图片的 ...
HTML+CSS实现菜单的3D翻转特效
HTML+CSS实现菜单的3D翻转特效效果图如下: HTML部分源代码如下: <!DOCTYPE html> <html lang="en"><he ...
html 图片旋转插件,jQuery插件expander实现图片翻转特效
分享一款基于jQuery图片弹出翻转特效代码.这是一款基于jQuery+HTML5实现的,里面包含六款不同效果的鼠标点击图片弹出特效下载.效果图如下: 引入CSS和JS expander.min.js ...
带翻转特效的会员登录注册html页面源码
大家好,今天给大家介绍一款,带翻转特效的会员登录注册html页面源码(图1).送给大家哦,获取方式在本文末尾. 图1 点击登录和注册切换时,带翻转特效(图2) 图2 源码完整,需要的朋友可以下载学习( ...
HTML5锤子官网,锤子官网3D翻转特效banner插件
锤子官网3D翻转特效banner插件 **每次访问锤子手机官网的页面时,都会欣喜的玩耍一番那个会翻转的banner,感觉科技感十足这么有趣的效果,自己也很想试一试能否实现,于是就核心的特效做了代码的 ...
立方体盒子翻转特效图文展示素材PR视频模板
这是一个节奏快.结构良好的创意立方体盒子翻转特效图文展示素材PR视频模板(Mogrt),非常适合您的简介.演示.标题.电影.促销.幻灯片.音乐剪辑.广播.电视/媒体开场白.演示.字幕.电影.电影预告片 ...
CSS 几款比较常用的翻转特效
最近一直在忙着做项目,也没有及时的整理博客,今天项目展示结束了,感觉不尽如意,还是有点小小的失落,毕竟班长在我们组,没拿到第一有点对不住他们,通过这次项目,深深的感受到了团队合作的重要性,我们组三个人 ...
CSS 几款比较常用的翻转特效(转载)
第一个:360度翻转特效 <style> * {margin:0;padding:0; } .aa {width: 220px;height: 220px;margin: 0 auto;b ...

backface-visibility 翻转特效

卡片翻转特效的实现过程

backface-visibility 翻转特效相关推荐

最新文章

热门文章