大家好,我是 Just,这里是「设计师工作日常」,今天分享的是利用 css3 属性 backface-visibility
让卡片翻转的过渡动画效果。
最新文章通过公众号「设计师工作日常」发布。
目录
整体效果
知识点:
① 伪元素的灵活使用
②transform
过渡属性的使用
③ css3 中backface-visibility
属性的灵活使用
思路:
利用::before
和::after
伪元素绘制两个不同的矩形卡片,然后根据鼠标悬浮状态让两个矩形卡片翻转展示。
核心代码部分,简要说明了写法思路;完整代码在最后,可直接复制到本地运行。
核心代码
html 代码
.card54
矩形卡片主体标签。
css 部分代码
1、先定义卡片
.card54
的大小尺寸,以及其它通用样式。
2、然后利用伪元素
::before
和::after
创建两个矩形卡片,分别定义不同的content
值;然后利用 css3 属性backface-visibility
,当元素发生背向屏幕时,元素不可见,这样当两个矩形卡片发生翻转时就只显示正面面对屏幕的了。
3、然后根据伪元素
:hover
状态,来让矩形卡片沿着 Y 轴翻转;再加上transition
过渡参数,这样一个卡片翻转效果就完成了。
Tips:
css3 中 backface-visibility
属性定义当元素背面向屏幕时是否可见,该属性大部分主流浏览器都已经支持。
backface-visibility
属性值有两个,默认为 visible
,定义当元素背向时是可见的;另一个值为 hidden
,定义当元素背向时是不可见的。
如果在旋转元素不希望看到其背面时,该属性很有用。
完整代码如下
html 页面
css 样式
页面渲染效果
以上就是所有代码,以及简单的思路,希望对你有一些帮助或者启发。
我是 Just,这里是「设计师工作日常」,求点赞求关注!