提供了编程的基础技术教程

zl程序教程

您现在的位置是：首页 >  其他

当前栏目

CSS3 3D 透视样式

2023-04-18 14:30:12 时间

发表于2017-10-052019-01-01 作者 wind 

<!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 平面的距离

相关文章