Question

我找不到-webkit-perspective所做的任何事情。

-webkit-perspective: 1000;

任何指示？

谢谢，

Answer 1

perspective属性定义从视图中放置3D元素的像素数。此属性允许您更改3D元素的查看方式。

定义元素的透视属性时，是获取透视视图的CHILD元素，而不是元素本身。

<!DOCTYPE html>
<html>
<head>
<style>
#div1
{
position: relative;
height: 150px;
width: 150px;
margin: 50px;
padding:10px;
border: 1px solid black;
-webkit-perspective:1000px; /* Chrome, Safari, Opera  */
perspective:1000px;
}

#div2
{
padding:50px;
position: absolute;
border: 1px solid black;
background-color: red;
-webkit-transform: rotateX(45deg); /* Chrome, Safari, Opera  */
transform: rotateX(45deg);
}
</style>
</head>

<body>

<div id="div1">
  <div id="div2">HELLO</div>
</div>

</body>
</html>

Answer 2

我创建了这个 DEMO 一段时间，以了解并创建一个CSS立方体。尝试并改变观点以了解它的作用。

css3 webkit透视功能

2 个答案: