520要来了，CSS3模拟3D旋转节日表白动画特效(520要来了要吵架的赶紧)

原力计划520要来了，CSS3模拟3D旋转节日表白动画特效

推荐整理分享520要来了，CSS3模拟3D旋转节日表白动画特效(520要来了要吵架的赶紧)，希望有所帮助，仅作参考，欢迎阅读内容。

文章相关热门搜索词:520就要到了的说说,520要来了要吵架的赶紧,520要来了,但是女朋友没有给我说,520要到了,520要来了好紧张,520要来了在网上卖男女手表怎么说,520要来了要吵架的赶紧,520要来了,内容如对您有帮助，希望把文章链接给更多的朋友！

一年一度的520要来了，做为一名CSS3爱好者，怎么能不为大家的技术型表白做出一点贡献呢，这不，用CSS3模拟3D旋转的表白特效来了，快快拿去表白

目录

实现思路 

单层3D可见

HTML源代码

CSS3源代码

---

实现思路 

本文通过添加.scene类，添加.banner类，使其双层3D呈现 transform-style: preserve-3d ；

然后将360度切割为24份，每份占用15度，进行内容分部；

再利用 animation 配合 transform 的Y轴旋转，达到3D旋转的效果

单层3D可见

我们知道如果是2D的，就是一个平面，无法看见对面的旋转背面，所以做3D旋转很炫酷，但如果单层3D可见旋转的话，会是这个样子

.scene { position: relative; transform-style: preserve-3d;}

但如果只保留 banner类中的3D可见，却又效果不同，但仍然不是我们想要的效果，这个时候虽然也出现了一定的3D效果，但背面却被遮挡了，我们是希望当前文案正面展示，背面的可见，达到一个真正的有角度的3D效果

.scene { position: relative; /* transform-style: preserve-3d; */}.banner { display: flex; transform-style: preserve-3d; -webkit-animation: rotate 24s infinite linear; animation: rotate 24s infinite linear;}

HTML源代码

将360度切割为24分段，每段占用15度的位置。然后给.panel类的::before属性添加content文案 “又是一个520，做我男朋友吧”。然后再针对 :nth-child 每一个切块，做出定位，使用 left hue 和 angle 属性

最终再利用.banner 的 animation动画，辅助以 transform: rotateY 来整体实现

<div class="scene"> <div class="banner"> <div class="panel"></div> <div class="panel"></div> <div class="panel"></div> <div class="panel"></div> <div class="panel"></div> <div class="panel"></div> <div class="panel"></div> <div class="panel"></div> <div class="panel"></div> <div class="panel"></div> <div class="panel"></div> <div class="panel"></div> <div class="panel"></div> <div class="panel"></div> <div class="panel"></div> <div class="panel"></div> <div class="panel"></div> <div class="panel"></div> <div class="panel"></div> <div class="panel"></div> <div class="panel"></div> <div class="panel"></div> <div class="panel"></div> <div class="panel"></div> </div></div>CSS3源代码body { background-color: #000; color: #fff; min-height: 100vh; display: grid; place-items: center; perspective: 500px; perspective-origin: 50% calc(50% - 150px);}.scene { position: relative; /* transform-style: preserve-3d; */}.banner { display: flex; transform-style: preserve-3d; -webkit-animation: rotate 24s infinite linear; animation: rotate 24s infinite linear;}@-webkit-keyframes rotate { to { transform: rotateY(-360deg); }}@keyframes rotate { to { transform: rotateY(-360deg); }}.panel { position: absolute; transform: translate(-50%, -50%) rotateY(var(--angle)) translateZ(190px); width: 50px; height: 120px; overflow: hidden;}.panel::before { position: absolute; left: var(--left); content: "又是一个520，做我男朋友吧"; font-size: 96px; width: -webkit-max-content; width: -moz-max-content; width: max-content; color: hsl(var(--hue), 75%, 75%);}.panel:nth-child(1) { --left: 0px; --hue: 0; --angle: 0deg;}.panel:nth-child(2) { --left: -50px; --hue: 15; --angle: 15deg;}.panel:nth-child(3) { --left: -100px; --hue: 30; --angle: 30deg;}.panel:nth-child(4) { --left: -150px; --hue: 45; --angle: 45deg;}.panel:nth-child(5) { --left: -200px; --hue: 60; --angle: 60deg;}.panel:nth-child(6) { --left: -250px; --hue: 75; --angle: 75deg;}.panel:nth-child(7) { --left: -300px; --hue: 90; --angle: 90deg;}.panel:nth-child(8) { --left: -350px; --hue: 105; --angle: 105deg;}.panel:nth-child(9) { --left: -400px; --hue: 120; --angle: 120deg;}.panel:nth-child(10) { --left: -450px; --hue: 135; --angle: 135deg;}.panel:nth-child(11) { --left: -500px; --hue: 150; --angle: 150deg;}.panel:nth-child(12) { --left: -550px; --hue: 165; --angle: 165deg;}.panel:nth-child(13) { --left: -600px; --hue: 180; --angle: 180deg;}.panel:nth-child(14) { --left: -650px; --hue: 195; --angle: 195deg;}.panel:nth-child(15) { --left: -700px; --hue: 210; --angle: 210deg;}.panel:nth-child(16) { --left: -750px; --hue: 225; --angle: 225deg;}.panel:nth-child(17) { --left: -800px; --hue: 240; --angle: 240deg;}.panel:nth-child(18) { --left: -850px; --hue: 255; --angle: 255deg;}.panel:nth-child(19) { --left: -900px; --hue: 270; --angle: 270deg;}.panel:nth-child(20) { --left: -950px; --hue: 285; --angle: 285deg;}.panel:nth-child(21) { --left: -1000px; --hue: 300; --angle: 300deg;}.panel:nth-child(22) { --left: -1050px; --hue: 315; --angle: 315deg;}.panel:nth-child(23) { --left: -1100px; --hue: 330; --angle: 330deg;}.panel:nth-child(24) { --left: -1150px; --hue: 345; --angle: 345deg;}

效果如图

 我准备了一个非常有意思的投票，大家看完了文章可以投个票哦，开心一下，一直到这里，你愿意给狗哥点个关注吗？