<!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>
1 回答
慕莱坞9220042
TA贡献377条经验 获得超508个赞
你好，你这里的样式写的是火狐浏览器里的，用火狐浏览器打开就可以看到效果，可以改为这样其他浏览器就可以看到效果了，看不到的可以单独增加对应的写法：
<!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度。
望采纳！
- 1 回答
- 1 关注
- 1288 浏览
添加回答
举报
0/150
提交
取消