CSS3 3D 透视样式

杨焱

发布于 2021-12-07 20:56:14

4220

发表于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 平面的距离

本文参与腾讯云自媒体同步曝光计划，分享自作者个人站点/博客。

原始发表：2017-10-05，如有侵权请联系 cloudcommunity@tencent.com 删除

CSS3 3D 透视样式

CSS3 3D 透视样式

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐