CSS3 3D 透视样式

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

#div2
{
padding:50px;
position: absolute;
border: 1px solid black;
background-color: yellow;
-webkit-transform: rotateX(30deg); /* Safari and Chrome */
}
#div3
{
padding:50px;
position: absolute;
border: 1px solid black;
background-color: green;
-webkit-transform: rotateX(10deg); /* Safari and Chrome */
}
</style>
</head>

<body>

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

</div>
 
</body>
</html>

perspective 可以控制用户与元素3d 空间中 Z 平面的距离

Leave a Comment

此站点使用Akismet来减少垃圾评论。了解我们如何处理您的评论数据