实现页面的3D效果

html:

<!DOCTYPE html>
<html lang="zh">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>jQuery实现3D的跑马灯动画特效</title>
    <link rel="stylesheet" href="css/style.css">
    <!--[if lt IE9]>
<script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script>
<![endif]-->
</head>

<body>
    <div id="marquee">
        <div><span>欢迎访问html5tricks</span></div>
        <div aria-hidden="true"><span>欢迎访问html5tricks</span></div>
    </div>
    <form onsubmit="setText(event)">
        <label for="textsource">使用你自己的文本</label>
        <input type="text" id="textsource" value="欢迎访问html5tricks" autocapitalize="characters" pattern=".{5,60}" title="5-30个字符长度">
        <input type="submit" class="btn" value="使用">
    </form>
    <script src="js/jquery-2.1.1.min.js" type="text/javascript"></script>
    <script type="text/javascript">
    function setText(event) {
        event.preventDefault();
        leftText.innerText = textsource.value.toUpperCase();
        rightText.innerText = textsource.value.toUpperCase();
    }
    var leftText = document.querySelector("#marquee div:first-of-type span");
    var rightText = document.querySelector("#marquee div:last-of-type span");
    var textsource = document.getElementById("textsource");
    setText();
    </script>

</body>

</html>

css:

body{
	background: #494A5F;
	color: #D5D6E2;
	font-weight: 500;
	font-size: 1.05em;
	font-family: "Microsoft YaHei","宋体","Segoe UI", "Lucida Grande", Helvetica, Arial,sans-serif, FreeSans, Arimo;
}
a{color: #2fa0ec;outline: none;text-decoration: none;}
a:hover,a:focus{color:#74777b;text-decoration: none;}

@font-face {
  font-family: Agency;
}
body {
  font-family: "Microsoft YaHei","Segoe UI", "Lucida Grande", Helvetica, Arial,sans-serif;
  marging: 0;
}

#marquee {
  margin-top: 3rem;
  -webkit-perspective: 500px;
          perspective: 500px;
  font-size: 0;
  font-family: "Microsoft YaHei","Segoe UI", "Lucida Grande", Helvetica, Arial,sans-serif;
}

#marquee div {
  display: inline-block;
  height: 12rem;
   30rem;
  position: relative;
}

#marquee div:first-of-type {
  background: #e5233e;
  -webkit-transform-origin: top right;
          transform-origin: top right;
  -webkit-transform: rotateY(-40deg);
          transform: rotateY(-40deg);
  color: #fff;
}

#marquee div:last-of-type {
  background: #b31e31;
  -webkit-transform-origin: top left;
          transform-origin: top left;
  -webkit-transform: rotateY(45deg);
          transform: rotateY(45deg);
  color: #f8c9d9;
}

#marquee div {
  font-size: 8rem;
  overflow: hidden;
}

#marquee div span {
  position: absolute;
   400%;
  line-height: 1.4;
}

@-webkit-keyframes leftcrawl {
  to {
    -webkit-transform: translateX(-100rem);
            transform: translateX(-100rem);
  }
}

@keyframes leftcrawl {
  to {
    -webkit-transform: translateX(-100rem);
            transform: translateX(-100rem);
  }
}
@-webkit-keyframes rightcrawl {
  to {
    -webkit-transform: translateX(-130rem);
            transform: translateX(-130rem);
  }
}
@keyframes rightcrawl {
  to {
    -webkit-transform: translateX(-130rem);
            transform: translateX(-130rem);
  }
}
#marquee div:first-of-type span {
  -webkit-transform: translateX(60rem);
          transform: translateX(60rem);
  -webkit-animation: leftcrawl 14s linear infinite;
          animation: leftcrawl 14s linear infinite;
  text-shadow: 4px 0px 4px rgba(0, 0, 0, 0.3);
}

#marquee div:last-of-type span {
  -webkit-transform: translateX(30rem);
          transform: translateX(30rem);
  -webkit-animation: rightcrawl 14s linear infinite;
          animation: rightcrawl 14s linear infinite;
}

form {
  margin-top: 3rem;
  background: #334;
  padding: 1rem;
  text-align: center;
  color: #fff;
}

input[type="text"] {
  padding: .5rem;
  font-size: 1.2rem;
   22rem;
}

input[type="text"] {
  padding: .5rem;
}

label {
  margin: 1rem;
}

@media all and (max- 993px) {
  #marquee {
    -webkit-perspective: none;
            perspective: none;
  }

  #marquee div:last-of-type {
    opacity: 0;
    height: 0;
  }

  #marquee div:first-of-type {
     80%;
  }
}