为什么浏览器把我css3动画特效禁用了？

我是在Mac系统下用的谷歌浏览器效果如图所示Html代码：<html><head> <meta charset="utf-8"> <title></title> <link rel="stylesheet" type="text/css" href="__PUBLIC__/css/work.css"> <script type="text/javascript" src="__PUBLIC__/js/jquery-1.11.2.min.js"></script> <script type="text/javascript" src="__PUBLIC__/js/work.js"></script></head><body> <div class="boxs" onselectstart="return false">  <div class="box center">  <div class="rotating"> <div class="side front"><img src="__PUBLIC__/img/123.jpg"></div> <div class="side back">123</div> </div> </div> </div></body></html>css代码：*{padding: 0; margin: 0;}html,body{width: 100%; height: 100%;}.boxs{width: 100%; height: 100%; background-color: #ccc; overflow: hidden; -webkit-perspective:800px; perspective:800px;}.box{width: 300px; height: 200px; background-color: #ccc; z-index: 1; box-shadow: 0 0 1px rgba(0,0,0,.01);position: absolute;}.rotating{width: 100%; height: 100%; position: absolute; -webkit-transform-style: preserve-3d; -webkit-transition:all 0.6s;}.rotating .side{width: 100%; height: 100%; position: absolute; top: 0; left: 0; -webkit-backface-visibility:hidden;}.rotating .front{ -webkit-transform:roateY(0deg);}.rotating .front img{width: 100%; height: 100%;}.rotating .back{font-size: 30px; line-height: 200px; text-align: center; color: #fff; background-color: #666; -webkit-transform:roateY(180deg);}.center{left: 50%; top: 50%; margin-left: -150px; margin-top: -100px; z-index: 99;}/*让选中的box居中*/

您可能感兴趣问答

Collapsible

热门标签

热点问答