章节 (22) 3D转换模块

注意:

文中的img标签![](images/jacky/xin.png) 全部变成了macdown格式

一. 什么是2D和3D

1.什么是2D和3D

2D就是一个平面, 只有宽度和高度, 没有厚度
3D就是一个立体, 有宽度和高度, 还有厚度
默认情况下所有的元素都是呈2D展现的

2.如何让某个元素呈3D展现

和透视一样, 想看到某个元素的3d效果, 只需要给他的父元素添加一个transform-style属性, 然后设置为preserve-3d即可

3.transform-style的取值:

flat:默认取值,二维的;
preserve-3d:3D效果;

二. 正方体(有瑕疵,页面文字显示有问题)

    
    
    



    
1
    
2
    
3
    
4
    
5
    
6

正方体(有瑕疵,仅供了解)

三. 正方体(终极方案)

旋转90度后,坐标系也跟着旋转了90度,故应该沿着z轴移动;

立体效果攻略:先旋转一定的度数,再沿z轴平移

    
    
    



    
1
    
2
    
3
    
4
    
5
    
6

正方体完美方案

四.长方体广告

先按正方体编写代码,只需要水平方向上放大N倍,就会呈现长方体效果

    
    
    



    
![](images/banner1.png)
    
![](images/banner2.jpg)
    
![](images/banner3.jpg)
    
![](images/banner4.jpg)
    

    

长方体广告

五.3D音乐播放器

注意点:

background-size:cover; 使图片填充整个网页

@keyframes sport {
            from{
                /*
                注意点:
                1.动画中如果有和默认样式中同名的属性, 会覆盖默认样式中同名的属性
                2.在编写动画的时候, 固定不变的值写在前面, 需要变化的值写在后面
               例如:
               transform: rotateX(-10deg) rotateY(0deg); >> rotateX(-10deg)为固定不变的
               rotateY(0deg)是变化的,所以rotateX(-10deg)写在前面,如果把它写在后面,会有意想不到的效果,
               这个效果肯定不是我们想要的
                */
                transform: rotateX(-10deg) rotateY(0deg);
            }
            to{
                transform: rotateX(-10deg) rotateY(360deg);
            }
        }

    
    
    



    
![](images/jacky/1.png)
    
![](images/jacky/2.jpg)
    
![](images/jacky/3.jpg)
    
![](images/jacky/4.gif)
    
![](images/jacky/5.jpg)
    
![](images/jacky/6.jpg)

![](images/jacky/xin.png) //背景图片:都变成macdown格式鸟

3D音乐播放器