3D轮播图

深碍√TFBOYSˉ_ 2023-08-17 15:22 136阅读 0赞

# 3D轮播图：一个立方体不断旋转四个面来轮播广告![在这里插入图片描述][20190926092619877.gif] #

# css3代码： #

*{
            margin: 0;
            padding: 0;
        }
        ul{ 
            margin: 0 auto;
            margin-top: 200px;
            width: 295px;
            height: 160px;
            transform-style: preserve-3d;
            animation: mykeyframe 5s linear infinite;
        }
        @keyframes mykeyframe{
          from{
            transform: rotateX(0deg) rotateY(0deg);
          }
          to{
            transform: rotateX(360deg) rotateY(0deg);
          }
        }
        li{
            width: 294px;
            height: 160px;
            position: absolute;
            float: left;
            font-size: 50px;
            list-style: none;
        }
        li:nth-child(1){
            background: url(images/aaaa.jpg);
            background-size: 100%;
            transform: translateY(80px) rotateX(90deg);
        }
        li:nth-child(2){
            background: url(images/aaaa.jpg);
            transform: translateY(-80px) rotateX(90deg);
        }
        li:nth-child(3){
            background: url(images/aaaa.jpg);
            transform: translateZ(80px);
        }
        li:nth-child(4){
            background: url(images/aaaa.jpg);
            transform: translateZ(-80px);
        }

# html代码 #

css3中的3d坐标  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NTA4ODk5OA_size_16_color_FFFFFF_t_70]

1.  若要产生3d立体轮播图首先先建立一个ul ，再建立四个 li，分别为立方体的四个面，且li为绝对定位就可以将li落在一块，li与ul大小相同。
2.  最终达到的立体效果即翻转四个面达成效果
3.  演示第一个面的应实现的效果![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NTA4ODk5OA_size_16_color_FFFFFF_t_70 1]  
    黑框为ul。红色正方形为 li，即第一个面，  
    先translateY(80px);使li向上移动半个宽度  
    在使用 rotateX(90deg);使li以x轴旋转90度（注：旋转的轴位于图形的中间）  
    得到效果  
    ![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NTA4ODk5OA_size_16_color_FFFFFF_t_70 2]  
    （注：黑框为ul 红框为第一个li）
4.  第二个li向下移动半个宽度，再选装90度即可得到下面
5.  第三个li沿z轴向前移动半个宽度即可得到前面
6.  第四个li沿z轴向后移动半个宽度即可得到后面
7.  这样即可得到一个立方体的四个面，但此时的ul仍然是一个平面
8.  为ul增加属性 transform-style: preserve-3d; 使ul拥有厚度，即可的到立体
9.  为ul设置旋转动画，沿x轴旋转360度为一次动画，得到最终效果

[20190926092619877.gif]: /images/20230810/dbd2442255fc40f88c37809f6dbce231.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NTA4ODk5OA_size_16_color_FFFFFF_t_70]: /images/20230810/9e61a8ebe15649dd98ab64323a494b78.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NTA4ODk5OA_size_16_color_FFFFFF_t_70 1]: /images/20230810/bc715e623d094fae8ad07549565159d7.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NTA4ODk5OA_size_16_color_FFFFFF_t_70 2]: /images/20230810/f389f40a01324f159e4b75ec239fb7cc.png