使用纯CSS实现3D旋转效果的示例代码

  发布时间:2020-01-03 15:39:54   作者:CoderMiner   我要评论
这篇文章主要介绍了使用纯CSS实现3D旋转效果的示例代码,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧

GPT4.0+Midjourney绘画+国内大模型 会员永久免费使用!
如果你想靠AI翻身,你先需要一个靠谱的工具!

主要使用CSS中的 preserve-3d 、perspective 属性实现3D效果

效果

HTML代码

1
2
3
4
5
6
7
8
9
10
<body>
    <div class="box">
        <div class="face front">
            <h2>前面</h2>
        </div>
        <div class="face back">
            <h2>背面</h2>
        </div>
    </div>
</body>

为了演示效果,将元素居中,body的css设置

1
2
3
4
5
6
7
8
9
10
11
12
13
*{
    margin: 0;
    padding: 0;
}
 
body{
    width: 100%;
    height: 100vh;
    display: flex;
    justify-content: center;
    align-items: center;
    background: #333;
}

box 属性设置

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
.box{
    width: 300px;
    height: 400px;
    transform-style: preserve-3d;
    position: relative;
}
 
.face{
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    transform-style: preserve-3d;
    display: flex;
    justify-content: center;
    align-items: center;
    backface-visibility: hidden;
    transition: 2s ease-in-out;
    transform: perspective(500px) rotateY(0deg);
}

前面属性设置

1
2
3
.face.front{
    background: #ff0;
}

背面属性设置,在Y轴旋转 180度,先不显示

1
2
3
4
5
.face.back{
    background: #3bc2ff;
    color: #fff;
    transform: perspective(500px) rotateY(180deg);
}

设置悬浮的动画效果

1
2
3
4
5
6
7
.box:hover .face.front{
    transform: perspective(500px) rotateY(180deg);
}
 
.box:hover .face.back{
    transform: perspective(500px) rotateY(360deg);
}

设置文字的悬浮效果

1
2
3
4
5
.box .face h2{
    font-size: 4em;
    text-transform: uppercase;
    transform: perspective(500px) translateZ(50px);
}

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

蓄力AI

相关文章

  • CSS3实现酷炫的3D旋转透视效果

    这篇文章主要介绍了CSS3实现酷炫的3D旋转透视效果,代码简单易懂,非常不错,具有一定的参考借鉴价值,需要的朋友可以参考下
    2019-11-21
  • HTML5+css3:3D旋转木马效果相册

    这篇文章主要介绍了HTML5+css3:3D旋转木马效果相册,主要运用了perspective和tranlateY这两个知识点,有需要的可以了解一下。
    2017-01-03
  • CSS3让登陆面板3D旋转起来

    点击登陆面板会发生360度旋转,并显示信息,真正使用CSS3让登陆面板3D旋转起来,如何实现登陆面板3D旋转,感兴趣的小伙伴们可以参考一下
    2016-05-03
  • CSS3 3D旋转rotate效果实例介绍

    这篇文章主要为大家详细介绍了CSS3 3D旋转rotate效果实例,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
    2016-05-03
  • CSS3近阶段篇之酷炫的3D旋转透视

    这篇文章主要介绍了CSS3近阶段篇之酷炫的3D旋转透视 的相关资料,需要的朋友可以参考下
    2016-04-28
  • 纯CSS3实现3D旋转书本效果

    有一些前沿的电商网站已经开始使用3D模型来展示商品并支持在线定制,而其中图书的展示是最为简单的一种,无需复杂的建模过程,使用图片和CSS3的一些变换即可实现更好的展示
    2016-03-21
  • css3实现3d旋转动画特效

    这篇文章主要介绍了css3实现3d旋转动画特效,使用CSS3实现了3d立方体的左旋转,右旋转,上下旋转等效果,十分实用,有需要的小伙伴来参考下吧
    2015-03-10

最新评论