CSS3 3D 透视样式

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

这篇文章有用吗?

平均评分 0 / 5. 投票数: 0

到目前为止还没有投票!成为第一位评论此文章。

很抱歉,这篇文章对您没有用!

让我们改善这篇文章!

告诉我们我们如何改善这篇文章?


了解 工作生活心情记忆 的更多信息

Subscribe to get the latest posts sent to your email.

发表回复

您的电子邮箱地址不会被公开。 必填项已用 * 标注

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