看不到3d效果，就是不知错在哪？？帮我看看
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>3d</title>
<style type="text/css">
#pork{
height: 200px;
width: 200px;
margin:30px auto;
-moz-perspective:800px;
-moz-perspective-origin:50% 50%;
-moz-transform-style:preserve-3d;
position: relative;
}
.page{
height: 200px;
width: 200px;
margin:30px auto;
position: absolute;
background-color:pink;
-moz-transform:rotateY(45deg);
}
</style>
</head>
<body>
<div id="#pork">
<div class="page"></div>
</div>
</body>
</html>
宝慕林4326916浏览 1289回答 1
1回答
-
慕莱坞9220042
你好，你这里的样式写的是火狐浏览器里的，用火狐浏览器打开就可以看到效果，可以改为这样其他浏览器就可以看到效果了，看不到的可以单独增加对应的写法：<!DOCTYPE html> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8"> <title>3d</title> <style type="text/css"> #pork{ height: 200px; width: 200px; margin:30px auto; perspective:800px; perspective-origin:50% 50%; transform-style:preserve-3d; -moz-perspective:800px; -moz-perspective-origin:50% 50%; -moz-transform-style:preserve-3d; position: relative; } .page{ height: 200px; width: 200px; margin:30px auto; position: absolute; background-color:pink; transform:rotateY(45deg); -moz-transform:rotateY(45deg); } </style> </head> <body> <div id="#pork"> <div class="page"></div> </div> </body> </html>看效果就是变窄了，其实是旋转的45度。望采纳！
随时随地看视频慕课网APP
相关分类
CSS3