                        課程
                    
                        /前端開發(fā)
                        
                            /CSS3
                        
                        /CSS3 3D 特效

為什么么效果

大蚊子1023

2016-10-25

源自：CSS3 3D 特效 2-2

關(guān)注問題我要回答

919

操作

收起

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>