前端案例--CSS3 3D变形制作展示区

本文主要介绍CSS3 3D变形制作展示区，这些都是笔者曾经做的案例之一。实现的原理是，通过鼠标hover事件，调用transform对元素进行旋转、缩放、移动和倾斜。由于笔者还没有开通自己的服务器，以后会统一贴出自己的线上案例。

效果图

"en">

    "UTF-8">
    
    


"container">
    
CSS3 3D变形制作展示区
    
class="wrapper">
        <div class="item">
            <img src="http://img.mukewang.com/545b1e900001db6d04630253.png" />
                ">
                澳门风云闻名中外，曾担任美国赌场保安总顾问的魔术手石一坚，终回流澳门退休，更宴请各方朋友到来庆祝生日宴.
                
        
    

    
r">
        
">
            545b1eb20001ed6a03360201.png" />
                ">
                改过迁善该剧讲述了金明民饰演的律师在失忆后回顾自己以往的所作所为心生忏悔，为弥补自己犯下的错误而与自己曾经工作过的律师事务所对簿公堂的故事。
                
        
    

    
r">
        
">
            545b1eef0001c62903830217.png" />
                ">
                父子刑警本剧改编自雫井修介小说《Bitter Blood》。剧中，新晋刑警•佐原夏辉（佐藤健饰）被分配到银座警察
                
        
    

    
r">
        
">
            545b1f4e0001f90c02850210.png" />
                ">
                果宝特攻3果宝特攻3,顾名思义是果宝特攻的第二部续集,已在国家广播电影电视总局备案.暂定剧情为:菠萝吹雪偶然间穿越到了古代的水果世界
                
        
    
    
r">
        
">
            545b1f5500017d5603190214.png" />
                ">
                红眼1988年7月16日，从汉城始发的列车发生了一起严重的交通事故，造成100多人死亡。
                
        
    
    
r">
        
">
            545b1f620001874503500209.png" />
                ">
                熊出没之夺宝熊兵一场漆黑雨夜的意外事故，一段笑料十足的误打误撞，将两个外表相似却内容各异的箱子调换。
                
        
    

tips:为了让代码更优雅，且不影响其他的样式，引用本文的时候，请将style样式自行整理成本地.css文件再引用。还有就是h1, em,a类似这3种元素，笔者没有独立的类名，引用的时候，容易造成代码冲突。~如有疑问请留言，本文参考了慕课网的相关案例。