-慕课网

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

Crystal王白露

2014-08-22 16:53

我的在浏览器没效果啊

<!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>

写回答关注

4回答

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 1

as5633...

火狐要加perspective:800px

2014-11-06 17:09:24

共 1 条回复 >
桃花依旧、物是人非

2014-09-13 00:55:12

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

1 0

qq_網亟_...

我的也是-=-

2014-09-17 19:24:24

共 1 条回复 >
团酱

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>
以上代码在搜狗浏览器有效果，怎么改火狐都没有效果

1 0

vincen...

你写的是rotateX 效果不明显，改成rotateZ 就可以看到了。

2014-09-12 10:16:56

共 1 条回复 >
团酱

2014-08-28 11:07:32

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

0 0

CSS3 3D 特效

使用CSS3当中的属性，创建真实可用的三维效果

78565 学习 · 436 问题

查看课程

相似问题

老师我有俩问题，input标签点了一次就不能点了，你给的代码没有实时刷新的效果，应该怎么做呢？

回答 2

3D转换看不出近大远小的效果，怎么回事？

回答 3

transition: all 3s ease 1s;

回答 5

同样在Firefox调试这个程序时没效果。。。

回答 2

额，我的咋这样了

回答 2

打开慕课网App查看更多内容