css3实现星球大战伪片头

实现的不是很完美。。。，哈哈哈，配上音乐总体来说还是有点效果。。。没有音乐简直。。。不然直视。主要通过css3的transframe3d来实现。代码没有做浏览器兼容，因为全是一样的东西。

1.文字倾斜的效果由perspective+rotate实现，具体属性说明意义w3c都能查到。
perspective: 400;
-webkit-transform: rotateX(45deg);

2.在Z轴上的移动由tranlateZ（）实现。

需要注意的问题是，每个元素所对应的z轴是随块的位置不同会改变的。也就是说块的z轴始终与元素本身垂直，并不总是垂直于显示屏幕正中心。比如这里的boxTxt，它围绕x轴转了45°，此时它的z轴也会旋转45°，并不是一直正对显示屏正中心的位置。所以代码里在移动的并不是boxTxt和p标签，移动的而是box。

---

字体和音乐都是引入的本地文件，如果需要音乐和字体，我可以发给你。

具体代码：

<style>
        @font-face {
            font-family:star wars;
            src: url("D:/CODING/fontStyle/star wars.ttf");
        }
            *{
                background-color: black;
                font-family: "微软雅黑";
                font-size: 30px;
                color: skyblue;
            }

            .sky{
                position: relative;
                width: