<div id="container">
    
        <h1>CSS3 3D變形制作視頻展示區</h1>
        
        <div class="wrapper">
          <div class="item">
            <img src="http://pic2.qiyipic.com/image/20140415/4e/32/5f/v_105669963_m_601_180_101.jpg" />
            <span class="information">
              <
 
strong>澳門風雲</strong>聞名中外，曾擔任美國賭場保安總顧問的魔術手石一堅，終回流澳門退休，更宴請各方朋友到來慶祝生日宴.
            </span>
          </div>
        </div>
        
        <div class="wrapper">
          <div class="item">
            <img src="http://pic4.qiyipic.com/image/20140417/b5/01/81/a_100003950_m_601_m2_180_101.jpg"
 
 />
            <span class="information">
              <strong>改過遷善</strong> 該劇講述了金明民飾演的律師在失憶後回顧自己以往的所作所為心生懺悔，為彌補自己犯下的錯誤而與自己曾經工作過的律師事務所對簿公堂的故事。
            </span>
          </div>
        </div>
        
        <div class="wrapper">
          <div class
 
="item">
            <img src="http://pic1.qiyipic.com/common/lego/20140521/4515581d06cc4d5b8ab320da2cf3778d.jpg" />
            <span class="information">
              <strong>父子刑警</strong> 本劇改編自雫井修介小說《Bitter Blood》。劇中，新晉刑警·佐原夏輝（佐藤健飾）被分配到銀座警察
            </span>
          </div>
        </div>
        
        <div class="wrapper">
          <div class="item">
            <img src="http://pic5.qiyipic.com/image/20140319/7a/8d/4f/a_100003478_m_601_m1_180_101.jpg" />
            <span class="information">
              <strong>果寶特攻3</strong> 果寶特攻3,顧名思義是果寶特攻的第二部續集,已在國家廣播電影電視總局備案.暫定劇情為:菠蘿吹雪偶然間穿越到了古代的水果世界
            </span>
          </div>
        </div>
        <div class="wrapper">
          <div class="item">
            <img src="http://pic0.qiyipic.com/image/20140517/ce/e8/42/v_106167752_m_601_180_101.jpg" />
            <span class="information">
              <strong>紅眼</strong>1988年7月16日，從漢城始發的列車發生了一起嚴重的交通事故，造成100多人死亡。
            </span>
          </div>
        </div>
        <div class="wrapper">
          <div class="item">
            <img src="http://pic6.qiyipic.com/image/20140303/da/e9/aa/v_105073913_m_601_180_101.jpg" />
            <span class="information">
              <strong>熊出沒之奪寶熊兵</strong>一場漆黑雨夜的意外事故，一段笑料十足的誤打誤撞，將兩個外表相似卻內容各異的箱子調換。
            </span>
          </div>
        </div>
        
      </div> 

body {
  margin-top: 5em;
  text-align: center;
    color: #414142;
    background: rgb(246,241,232);
    background-image: -ms-radial-gradient(farthest-side ellipse at center,  rgba(246,241,232,.85) 39%,rgba(212,204,186,.5) 100%), url("http://fs0.139js.com/file/s_jpg_857b081bjw1du3kveu19sj.jpg");
    background-image: -webkit-radial-gradient(farthest-side ellipse at center,  rgba(246,241,232,.85) 39%,rgba(212,204,186,.5) 100%), url("http://fs0.139js.com/file/s_jpg_857b081bjw1du3kveu19sj.jpg");
    background-image: radial-gradient( farthest-side ellipse at center,  rgba(246,241,232,.85) 39%,rgba(212,204,186,.5) 100%), url("http://fs0.139js.com/file/s_jpg_857b081bjw1du3kveu19sj.jpg");
  background-size: cover;
}

h1, em, #information {
  display: block;
    font-size: 25px;
    font-weight: normal;
    margin: 2em auto;
}

a {
  color: #414142;
    font-style: normal;
    text-decoration: none;
    font-size: 20px;
}
        
a:hover {
  text-decoration: underline;
}
        
#container {
    margin: 0 auto;
    width: 1024px;
}
        
.wrapper {
  display: inline-block;
    width: 310px;
   height: 100px;
    vertical-align: top;
    margin: 1em 1.5em 2em 0;
    cursor: pointer;
    position: relative;
    font-family: Tahoma, Arial;
    -webkit-perspective: 4000px;
    -moz-perspective: 4000px;
    -ms-perspective: 4000px;
    -o-perspective: 4000px;
    perspective: 4000px;
}
  
.item {
  height: 100px;
    -webkit-transform-style: preserve-3d;
    -moz-transform-style: preserve-3d;
    -ms-transform-style: preserve-3d;
    -o-transform-style: preserve-3d;
    transform-style: preserve-3d;
    -webkit-transition: -webkit-transform .6s;
    -moz-transition: -moz-transform .6s;
    -ms-transition: -ms-transform .6s;
    -o-transition: -o-transform .6s;
    transition: transform .6s;
}
  
.item:hover {
  -webkit-transform: translateZ(-50px) rotateX(95deg);
  -moz-transform: translateZ(-50px) rotateX(95deg);
  -ms-transform: translateZ(-50px) rotateX(95deg);
  -o-transform: translateZ(-50px) rotateX(95deg);
  transform: translateZ(-50px) rotateX(95deg);
}
   
.item img {
   display: block;
   position: absolute;
   top: 0;
   border-radius: 3px;
   box-shadow: 0px 3px 8px rgba(0,0,0,0.3);
   -webkit-transform: translateZ(50px);
   -moz-transform: translateZ(50px);
   -ms-transform: translateZ(50px);
   -o-transform: translateZ(50px);
   transform: translateZ(50px);
   -webkit-transition: all .6s;
   -moz-transition: all .6s;
   -ms-transition: all .6s;
   -o-transition: all .6s;
   transition: all .6s;
   width: 310px; 
   height: 100px;
 }
    
 .item .information {
   display: block;
   position: absolute;
   top: 0;
   height: 80px;
   width: 290px;
   text-align: left;
   border-radius: 15px;
   padding: 10px;
   font-size: 12px;
   text-shadow: 1px 1px 1px rgba(255,255,255,0.5);
   box-shadow: none;
   background: rgb(236,241,244);
   background: -webkit-linear-gradient(to bottom,  rgba(236,241,244,1) 0%,rgba(190,202,217,1) 100%);
    background: -ms-linear-gradient(to bottom,  rgba(236,241,244,1) 0%,rgba(190,202,217,1) 100%);
    background: linear-gradient(to bottom,  rgba(236,241,244,1) 0%,rgba(190,202,217,1) 100%);

    -webkit-transform: rotateX(-90deg) translateZ(50px);
    -moz-transform: rotateX(-90deg) translateZ(50px);
    -ms-transform: rotateX(-90deg) translateZ(50px);
    -o-transform: rotateX(-90deg) translateZ(50px);
    transform: rotateX(-90deg) translateZ(50px);
    -webkit-transition: all .6s;
    -moz-transition: all .6s;
    -ms-transition: all .6s;
    -o-transition: all .6s;
    transition: all .6s;
 }
    
 .information strong {
   display: block;
   margin: .2em 0 .5em 0;
   font-size: 20px;
   font-family: "Oleo Script";
  }
.item:hover img {
  box-shadow: none;
  border-radius: 15px;
}
      
.item:hover .information {
  box-shadow: 0px 3px 8px rgba(0,0,0,0.3);
  border-radius: 3px;
 }

 

CSS3 3D變形制作視頻展示區