经验首页 前端设计 程序设计 Java相关 移动开发 数据库/运维 软件/图像 大数据/云计算 其他经验
当前位置:技术经验 » HTML/CSS » CSS3 » 查看文章
简单几步用纯CSS3实现3D翻转效果_css3_CSS
来源:jb51  时间:2019/1/18 9:12:20  对本文有异议

作为前端开发人员的必修课,CSS3能带我们完成许多基本动效,本期我们将用CSS3实现hover翻转效果~

第一步非常简单,我们简单画1个演示方块,为其 添加transition和transform属性

  1. // 本示例均使用Sass语法
  2. .block {
  3. width: 200px;
  4. height: 200px;
  5. background: brown;
  6. cursor: pointer;
  7. transition: 0.8s;
  8. &:hover {
  9. transform: rotateY(180deg);
  10. }
  11. }

我们看一看这时候的效果:

这里 需要注意 的是: transition属性要写在.block上而不是hover上 ,如果只在hover上写transition,则鼠标移出时并没有transition的过渡效果,如果我们只将transition写在hover上:

第二步比较关键:我们不难发现始终在1个平面上翻转,不够有立体感,因此我们需要稍加改变思路—— 用2层div嵌套

  1. // html部分
  2. <div class="block">
  3. <div class="block-in"></div>
  4. </div>
  1. // CSS部分
  2. .block {
  3. width: 200px;
  4. height: 200px;
  5. cursor: pointer;
  6. &-in {
  7. background: brown;
  8. height: 100%;
  9. transition: 0.8s;
  10. }
  11. &:hover .block-in {
  12. transform: rotateY(180deg);
  13. }
  14. }

此时效果没变,如下:

这个时候 关键的1步 来了:我们需要 给外层添加perspective和transform-style属性 ,为整个动画增添3D变形效果:

  1. .block {
  2. width: 200px;
  3. height: 200px;
  4. cursor: pointer;
  5. /* 3D变形 */
  6. transform-style: preserve-3d;
  7. -webkit-perspective: 1000;
  8. -moz-perspective: 1000;
  9. -ms-perspective: 1000;
  10. perspective: 1000;
  11. &-in {
  12. background: brown;
  13. height: 100%;
  14. transition: 0.8s;
  15. }
  16. &:hover .block-in {
  17. transform: rotateY(180deg);
  18. }
  19. }

最终实现效果如下:

最终我们 总结一下思路

1.建立内外2层div,鼠标 hover 到外层时,内层div添加翻转 transform: rotateY(180deg)

2.注意将 transition 属性添加到需要翻转的div上,而不是 hover 时

3.外层div添加 perspective 和 transform-style 属性,最终实现3D翻转效果

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持w3xue。

 友情链接:直通硅谷  点职佳  北美留学生论坛

本站QQ群:前端 618073944 | Java 606181507 | Python 626812652 | C/C++ 612253063 | 微信 634508462 | 苹果 692586424 | C#/.net 182808419 | PHP 305140648 | 运维 608723728

W3xue 的所有内容仅供测试,对任何法律问题及风险不承担任何责任。通过使用本站内容随之而来的风险与本站无关。
关于我们  |  意见建议  |  捐助我们  |  报错有奖  |  广告合作、友情链接(目前9元/月)请联系QQ:27243702 沸活量
皖ICP备17017327号-2 皖公网安备34020702000426号