html3d旋转特效代码（520要来了，CSS3模拟3D旋转节日表白动画特效）

一年一度的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; }

效果如图

 我准备了一个非常有意思的投票














，大家看完了文章可以投个票哦               ，开心一下  



     



     



   ，一直到这里














，你愿意给狗哥点个关注吗？