周末愉快——程序猿的浪漫css画玫瑰礼盒

周末周末继续找轻松的话题，程序猿的小浪漫，css画玫瑰。

先上效果图

开箱.gif

开花.gif

体验地址：http://120.27.68.231:9999/html/giftrose.html

盒子关键css说明

1、盒子父级设置三条关键属性。

transform-style: preserve-3d;   // 使被转换的子元素保留其 3D 转换
perspective: 400px;    // 设置元素被查看位置的视图
perspective-origin: 50% 0%;    // 这样您就能够改变 3D 元素的底部位置

2、底面，正方形，然后围绕X轴旋转90度。

3、左面/右面，长方形，定位在左面/右面，然后围绕Y轴旋转90度。

4、前面/后面，长方形，通过 translateY(-100px) translateZ(100px)平移到指定位置。

5、顶面两开的，顶面左边和顶面右边分别需要移动到对应位置，然后设置围绕点，之后在旋转使盒子盖上

6、打开动画，围绕Y轴旋转。

玫瑰关键css说明

1、同样玫瑰父级设置css

transform-style: preserve-3d;   // 使被转换的子元素保留其 3D 转换
perspective: 400px;    // 设置元素被查看位置的视图
perspective-origin: 50% 0%;    // 这样您就能够改变 3D 元素的底部位置

2、玫瑰花瓣如下设置颜色渐变，圆角底部50%，顶部35%，围绕底部中间旋转。

width: 100px;
height: 100px;
border-radius: 35% 35% 50% 50%;
transform-origin: center bottom;
background: repeating-linear-gradient(#ff3631, #d30a04 20%, #380000 100%);

3、一圈一圈的堆叠花瓣，使用平移和围绕Y轴旋转，此外还需要X轴旋转提供一些打开的感觉。

transform: rotateX(-20deg) rotateY(30deg) translateZ(45px) scale(0.8);

4、用scale和z-index，让其中间花瓣变小，距离远的被遮挡。

5、画花茎和叶子，叶子就很简单啦，围绕Z轴旋转就好了。

直接上代码

  
  
  



  

    

      

      

      

      
To My Love
      

      

      


      

        

          

          

          

          

        

        

        

        


        

        

        

        


        

        

        

        

        

        


        

        

        

        

        

        

        

        


        

        

        

        

        

        

        

        

        

        

      
    
  

谢谢阅读，原创不易，欢迎关注收藏点赞，也欢迎留言讨论。