css3中怎么实现图形3d翻转效果

css3中怎么实现图形3d翻转效果，很多新手对此不是很清楚，为了帮助大家解决这个难题，下面小编将为大家详细讲解，有这方面需求的人可以来学习下，希望你能有所收获。

创新互联坚持“要么做到，要么别承诺”的工作理念，服务领域包括：成都网站设计、做网站、成都外贸网站建设公司、企业官网、英文网站、手机端网站、网站推广等服务，满足客户于互联网时代的江西网站设计、移动媒体设计的需求，帮助企业找到有效的互联网解决方案。努力成为您成熟可靠的网络建设合作伙伴！

 
     body,div,ul,li{ padding:0; margin:0; } .container ul li { height: 180px; width: 180px; margin-right: 20px; margin-bottom: 20px; display: inline; -webkit-perspective: 1000px; -moz-perspective: 1000px; float: left; } .out_box{ position: relative; height: 180px; width: 180px; -webkit-transform-style: preserve-3d; -moz-transform-style: preserve-3d; -ms-transform-style: preserve-3d; transform-style: preserve-3d; -webkit-transition: 0.5s; -moz-transition: 0.5s; -o-transition: 0.5s; -ms-transition: 0.5s; transition: 0.5s; -webkit-backface-visibility: hidden; -moz-backface-visibility: hidden; backface-visibility: hidden; } .out_box div{ display: block; height: 180px; width: 180px; position: absolute; left: 0; top: 0; background: #060; text-align: center; -webkit-backface-visibility: hidden; -moz-backface-visibility: hidden; backface-visibility: hidden; color:#FFF; line-height:180px; font-size:16px; } .out_box .front_box{ z-index: 2; } .out_box .back_box{ z-index: 1; -webkit-transform: rotateY(180deg); -moz-transform: rotateY(180deg); transform: rotateY(180deg); } .container ul li:hover .out_box{ -webkit-transform: rotateY(180deg); -moz-transform: rotateY(180deg); transform: rotateY(180deg); } .container ul li:hover .back_box{ z-index: 3; }     
 
  front