设置transform-style时后面的preserve-3d前面不应该再加-webkit吧，老师可把我坑惨了，我做后面的挑战题，做出来的正方体一动就成平面的了，找了好久才发现是这儿的问题
-webkit-transform-style：-webkit-preserve-3d；
geminabcd
2015-11-25
6 回答
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<style>
#expriment{
-wekit-perspective: 800;
-webkit-perspective-origin: 50% 50%;
-webkit-transform-style:-webkit-preserve-3d;} /* Safari 和 Chrome */
#blocker{
width:500px;
height:500px;
background-color:#69c;
margin:100px auto;
/* Rotate div */
transform: rotateX(45deg);
-webkit-transform: rotateX(45deg);} /* Safari 和 Chrome */
</style>
<title>CSS3动画实例一</title>
</head>
<body>
<header>
<h2>实例一</h2>
<div id="expriment">
<div id="blocker">
</div>
</div>
</header>
<section></section>
<footer></footer>
</body>
</html>
为何没有3D效果？
举报
0/150
提交
取消
