1. <!DOCTYPE html>
    2. <html lang="en">
    3. <head>
    4.     <meta charset="UTF-8">
    5.     <title>3D变形制作视频展示区</title>
    6.     <style>
    7.         body{
    8.             margin-top: 5em;
    9.             text-align: center;
    10.             color: 414142;
    11.             background: rgb(246,241,232);
    12.             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");
    13.             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");
    14.             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");
    15.           background-size: cover;
    16.         }
    17.         h1,em,#information{
    18.             display: block;
    19.             font-size: 25px;
    20.             font-weight: normal;
    21.             margin: 2em auto;
    22.         }
    23.         a{
    24.             color: #414142;
    25.             font-style: normal;
    26.             text-decoration: none;
    27.             font-size: 20px;
    28.         }
    29.         a:hover{
    30.             text-decoration: underline;
    31.         }
    32.         #container{
    33.             margin: 0 auto;
    34.             width: 1024px;
    35.         }
    36.         .wrapper{
    37.             display: inline-block;
    38.             width: 310px;
    39.             height: 100px;
    40.             vertical-align: top;
    41.             margin: 1em 1.5em 2em 0;
    42.             cursor: pointer;
    43.             position: relative;
    44.             font-family: Tahoma,Arial;
    45.             -webkit-perspective: 4000px;
    46.             -moz-perspective: 4000px;
    47.             -ms-perspective: 4000px;
    48.             -o-perspective: 4000px;
    49.             perspective: 4000px;
    50.         }
    51.         .item{
    52.             height: 100px;
    53.             height: 100px;
    54.             -webkit-transform-style: preserve-3d;
    55.             -moz-transform-style: preserve-3d;
    56.             -ms-transform-style: preserve-3d;
    57.             -o-transform-style: preserve-3d;
    58.             transform-style: preserve-3d;
    59.             -webkit-transition: -webkit-transform .6s;
    60.             -moz-transition: -moz-transform .6s;
    61.             -ms-transition: -ms-transform .6s;
    62.             -o-transition: -o-transform .6s;
    63.             transition: transform .6s;
    64.         }
    65.         .item:hover{
    66.             -webkit-transform: translateZ(-50px) rotateX(95deg);
    67.              -moz-transform: translateZ(-50px) rotateX(95deg);
    68.              -ms-transform: translateZ(-50px) rotateX(95deg);
    69.              -o-transform: translateZ(-50px) rotateX(95deg);
    70.              transform: translateZ(-50px) rotateX(95deg);
    71.         }
    72.         .item img {
    73.                display: block;
    74.                position: absolute;
    75.                top: 0;
    76.                border-radius: 3px;
    77.                box-shadow: 0px 3px 8px rgba(0,0,0,0.3);
    78.                -webkit-transform: translateZ(50px);
    79.                -moz-transform: translateZ(50px);
    80.                -ms-transform: translateZ(50px);
    81.                -o-transform: translateZ(50px);
    82.                transform: translateZ(50px);
    83.                -webkit-transition: all .6s;
    84.                -moz-transition: all .6s;
    85.                -ms-transition: all .6s;
    86.                -o-transition: all .6s;
    87.                transition: all .6s;
    88.                width: 310px; 
    89.                height: 100px;
    90.          }
    91.           .item .information {
    92.                display: block;
    93.                position: absolute;
    94.                top: 0;
    95.                height: 80px;
    96.                width: 290px;
    97.                text-align: left;
    98.                border-radius: 15px;
    99.                padding: 10px;
    100.                font-size: 12px;
    101.                text-shadow: 1px 1px 1px rgba(255,255,255,0.5);
    102.                box-shadow: none;
    103.                background: rgb(236,241,244);
    104.                background: -webkit-linear-gradient(to bottom,  rgba(236,241,244,1) 0%,rgba(190,202,217,1) 100%);
    105.                 background: -ms-linear-gradient(to bottom,  rgba(236,241,244,1) 0%,rgba(190,202,217,1) 100%);
    106.                 background: linear-gradient(to bottom,  rgba(236,241,244,1) 0%,rgba(190,202,217,1) 100%);
    108.                 -webkit-transform: rotateX(-90deg) translateZ(50px);
    109.                 -moz-transform: rotateX(-90deg) translateZ(50px);
    110.                 -ms-transform: rotateX(-90deg) translateZ(50px);
    111.                 -o-transform: rotateX(-90deg) translateZ(50px);
    112.                 transform: rotateX(-90deg) translateZ(50px);
    113.                 -webkit-transition: all .6s;
    114.                 -moz-transition: all .6s;
    115.                 -ms-transition: all .6s;
    116.                 -o-transition: all .6s;
    117.                 transition: all .6s;
    118.              }
    119.               .information strong {
    120.                display: block;
    121.                margin: .2em 0 .5em 0;
    122.                font-size: 20px;
    123.                font-family: "Oleo Script";
    124.               }
    125.             .item:hover img {
    126.               box-shadow: none;
    127.               border-radius: 15px;
    128.             }
    130.             .item:hover .information {
    131.               box-shadow: 0px 3px 8px rgba(0,0,0,0.3);
    132.               border-radius: 3px;
    133.              }
    134.     </style>
    135. </head>
    136. <body>
    137.     <div id="container">
    138.             <h1>3D变形制作知名公司展示区</h1>
    139.             <div class="wrapper">
    140.                 <div class="item">
    141.                     <img src="http://p3.qhimg.com/t0113f4c931a6e56e29.jpg">
    142.                     <span class="information">
    143.                         <strong>昌元化工</strong>昌元化工公司，是全世界最大的高锰酸钾生产商，年产量约4万吨，占据国内90%和国际55%的市场份额。
    144.                     </span>
    145.                     </img>
    146.                 </div>
    147.             </div>
    148.             <div class="wrapper">
    149.                 <div class="item">
    150.                     <img src="http://p6.qhimg.com/t01193915845ce36a2f.jpg">
    151.                     <span class="information">
    152.                         <strong>巨石集团</strong>2016年中国玻璃纤维产量是362万吨，占了全球的50%--60%的份额，巨石集团占了中国三分之一，。
    153.                     </span>
    154.                     </img>
    155.                 </div>
    156.             </div>
    157.             <div class="wrapper">
    158.                 <div class="item">
    159.                     <img src="http://p5.qhimg.com/t01b6a5b2e45dda6745.jpg">
    160.                     <span class="information">
    161.                         <strong>大疆创新</strong>作为全球最大的消费级无人机厂商，大疆创新在2011年至2015年，销售额增长近100倍。大疆80%的销量来自于海外。
    162.                     </span>
    163.                     </img>
    164.                 </div>
    165.             </div>
    166.             <div class="wrapper">
    167.                 <div class="item">
    168.                     <img src="http://p3.qhimg.com/t0100c15ad1811f98c7.jpg">
    169.                     <span class="information">
    170.                         <strong>中国华为</strong>2016年华为的销售收入达到了5200亿人民币，同比增长32%，其中6成来自海外业务达到3200亿！
    171.                     </span>
    172.                     </img>
    173.                 </div>
    174.             </div>
    175.             <div class="wrapper">
    176.                 <div class="item">
    177.                     <img src="http://p8.qhimg.com/t01db6e588779c1f3a4.jpg">
    178.                     <span class="information">
    179.                         <strong>国家电网</strong>年营收超过2万亿元人民币，位居世界所有公司第二位，净利润高达102亿美元，更掌握着智能电网，特高压电网技术的国际标准制定权。
    180.                     </span>
    181.                     </img>
    182.                 </div>
    183.             </div>
    184.             <div class="wrapper">
    185.                 <div class="item">
    186.                     <img src="https://p1.ssl.qhimg.com/dr/270_500_/t01059dbb78b5e2eada.jpg?size=550x351" >
    187.                     <span class="information">
    188.                         <strong>阿里巴巴</strong>阿里巴巴网络技术有限公司是以曾担任英语教师的马云为首的18人于1999年在浙江杭州创立。
    189.                     </span>
    190.                     </img>
    191.                 </div>
    192.             </div>
    193.         </div>    
    194. </body>
    195. </html>