慕课网

源自：2-2 实际创建3D场景

我的在浏览器没效果啊

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>3d效果</title>
<style type="text/css">
.wind{
   -moz-perspective:800;
   -moz-perspective-origin:50% 50%;
   -moz-perspective-style:-moz-preserve-3d;
}
.block{
   height:500px;
   width:500px;
   background-color:#06F;
   margin:100px auto;

   -moz-transform:rotateZ(45deg);
}
</style>
</head>

<body>
   <div class="wind">
       <div class="block"></div>
    </div>
</body>
</html>

提问者：Crystal王白露 2014-08-22 16:53

个回答

3088038073

2014-10-18 13:18:05

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title></head>

<style>
#expriment {
perspective:800px;
perspective-origin:50% 50%;
transform-style:preserve-3d;
}
#block {
width:500px;
height:500px;
margin:100px auto;
background-color: #0099ff;

transform: rotatey(45deg);

}

</style>

<body>
<div id="expriment">
<div id="block">

</div></body>
</html>
这样才行 perspective:800px; perspective:800不行，要加一个PX

1
桃花依旧、物是人非

2014-09-13 00:55:12

我的长宽度变了，就是没有3D的效果。。。。

0
团酱

2014-08-28 11:34:16

<!DOCTYPE html>
<html>
<head>
<style>
#expriment {
perspective:800;
perspective-origin:50% 50%;
transform-style:preserve-3d;
-webkit-perspective:800; /* Safari and Chrome */
}
#block {
width:500px;
height:500px;
margin:100px auto;
background-color: yellow;
transform: rotateX(45deg);
-webkit-transform: rotateX(45deg); /* Safari and Chrome */
}
</style>
</head>

<body>
<div id="expriment">
<div id="block"></div>
</div>
</body>
</html>
以上代码在搜狗浏览器有效果，怎么改火狐都没有效果

0
团酱

2014-08-28 11:07:32

我也是这样写的，没有效果。。。。

0