一年一度的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 每一个切块，做出定位，使用lefthue 和angle 属性
最终再利用.banner 的animation动画，辅助以transform: rotateY 来整体实现
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;}效果如图
我准备了一个非常有意思的投票，大家看完了文章可以投个票哦，开心一下，一直到这里，你愿意给狗哥点个关注吗？