摘要：作为前端开发人员的必修课，翻转能带我们完成许多基本动效，本期我们将用实现翻转效果第一步非常简单，我们简单画个演示方块，为其添加和属性本示例均使用语法我们看一看这时候的效果这里需要注意的是属性要写在上而不是上，如果只在上写，则鼠标移出时并没有
作为前端开发人员的必修课，CSS3翻转能带我们完成许多基本动效，本期我们将用CSS3实现hover翻转效果~
第一步非常简单，我们简单画1个演示方块，为其 添加transition和transform属性 ：
?| 1 2 3 4 5 6 7 8 9 10 11 |
// 本示例均使用Sass语法
.block {
width: 200px;
height: 200px;
background: brown;
cursor: pointer;
transition: 0.8s;
&:hover {
transform: rotateY(180deg);
}
}
|
我们看一看这时候的效果：
这里 需要注意 的是： transition属性要写在.block上而不是hover上 ，如果只在hover上写transition，则鼠标移出时并没有transition的过渡效果，如果我们只将transition写在hover上：
第二步比较关键：我们不难发现始终在1个平面上翻转，不够有立体感，因此我们需要稍加改变思路—— 用2层div嵌套css3背景动画
?| 1 2 3 4 |
// html部分
<div class="block">
<div class="block-in"> |
| 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 |
// CSS部分
.block {
width: 200px;
height: 200px;
cursor: pointer;
&-in {
background: brown;
height: 100%;
transition: 0.8s;
}
&:hover .block-in {
transform: rotateY(180deg);
}
}
|
此时效果没变，如下：
这个时候 关键的1步 来了：我们需要 给外层添加perspective和transform-style属性 css3导航菜单 ，为整个动画增添3D变形效果：
?| 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 |
.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);
}
}
|
最终实现效果如下：
最终我们 总结一下思路 ：
1.建立内外2层div，鼠标 hover 到外层时，内层div添加翻转css3 transform: rotateY(180deg)
2.注意将 transition 属性添加到需要翻转的div上，而不是 hover 时
3.外层div添加 perspective 和 transform-style 属性，最终实现3D翻转效果
文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。
转载请注明本文地址：https://www.ucloud.cn/yun/1064.html
摘要：所以给父元素添加至此，就实现了一个翻转卡牌的效果，但是这里需要解决一个问题，因为属性不被支持支持，所以需要进行降级，我的做法是直接显示隐藏。 今天在工作中遇到需求，需要用CSS3写一个卡片翻转效果，这个效果看起来简单，但是还是涉及到一些不常用的CSS3中的3D转换的属性以及实现该效果的思路，所以这里总结一下。 原文链接：http://mrzhang123.github.io/2016/...
摘要：所以给父元素添加至此，就实现了一个翻转卡牌的效果，但是这里需要解决一个问题，因为属性不被支持支持，所以需要进行降级，我的做法是直接显示隐藏。 今天在工作中遇到需求，需要用CSS3写一个卡片翻转效果，这个效果看起来简单，但是还是涉及到一些不常用的CSS3中的3D转换的属性以及实现该效果的思路，所以这里总结一下。 原文链接：http://mrzhang123.github.io/2016/...
摘要：之前张鑫旭博客写的效果讲解得不错啊，既然是大神，应该能搜出点什么，结果一搜，还真有。参考感谢张鑫旭这篇文章好吧，变换，不过如此还有一篇写得不错的，帮助理解和属性最后引用张鑫旭的一句话纯粹从网上些效果代码，那永远就是的命咯 起因 昨晚在做慕课网的十天精通CSS3课程，其中的综合练习是要做一个3D导航翻转的效果。非常高大上。 以往这些效果我都很不屑，觉得网上一大堆这些特效的代码，复制粘贴就...
摘要：分析代码如下标签里包裹一个盒子里包裹两个，为效果的前后面做准备。分析外观定位代码如下效果首先创造环境，保留空间在的时候，我们让旋转，正面面对我们的元素向上翻转，下面有元素翻转上来，并且在翻转时有一个凸出来的效果。 效果预览 showImg(https://segmentfault.com/img/bVqF6k);分析：可以看出hover的时候是有前后两个面的翻转，并且有一个凸出效果。 ...
阅读 2771·2021-11-02 14:42
阅读 3161·2021-10-08 10:04
阅读 1181·2019-08-30 15:55
阅读 1023·2019-08-30 15:54
阅读 2307·2019-08-30 15:43
阅读 1677·2019-08-29 15:18
阅读 860·2019-08-29 11:11
阅读 2360·2019-08-26 13:52
