                        课程
                    
                        /前端开发
                        
                            /CSS3
                        
                        /CSS3 3D 特效

为什么么效果

大蚊子1023

2016-10-25

源自：CSS3 3D 特效 2-2

关注问题我要回答

862

操作

收起

2 回答

yclycl
2017-05-05

<!doctype html>
<html>
<head>
   <meta charset="utf-8">
   <title>3D 特效</title>
   <style type="text/css">
       *{ margin:0; padding; }/*transition-property:background-color;transition-duration:1s;transition-timing-function:ease;*/
       #block1{ width:400px; height:400px; background-color:#69c; margin:0 auto; transition: 2s; -webkit-transition: background-color 2s; -moz-transition:background-color 2s;}
       #block1:hover{ background-color: #F00; }
       #experiment{perspective:800px; perspective-origin:50% 50%; transform-style:preserve-3d;-webkit-perspective:800; -webkit-perspective-origin:50% 50%; -webkit-transform-style:preserve-3d;-moz-perspective:800; -moz-perspective-origin:50% 50%; -moz-transform-style:preserve-3d;}
       #block{ width:500px; height: 500px; background-color:#3333FF; margin:100px auto;
           transition: 2s}
           #block:hover{transform:rotateX(45deg);-webkit-transform:rotateX(45deg);-moz-transform:rotateX(45deg);}

   </style>
</head>

<body>
   <div id="block1"></div>
   <div id="experiment">
       <div id="block">
       </div>
   </div>
</body>
</html>