admin管理员组文章数量:1130349
Chrome 和 Safari 支持替代的 -webkit-perspective 属性。
perspective: number|none;
-webkit-perspective: number|none; /* Safari and Chrome */
这个属性定义3D元素距离视图的距离。他的备注里面还有个这个元素：perspective 属性只影响 3D 转换元素。
原来不懂他到底是干什么的。但今天在一个例子中看到了这个，测试了一下，看出效果了。好激动啊。在这里备注一下，啦啦啦。大家快来看看啊。
事情是这样的，我本来在测试旋转。沿X轴旋转
<html lang="en">
<head>
<title>Title</title>
</head>
<body style="background-color: yellow; height: 100%; margin: 0; width: 100%;">
<div class="buttonList" style="background-color: red; height: 100%; transform: rotateX(10deg); width: 100%;">
aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa
</div>
</body>
</html>
但其实这个就算旋转了也并不明显，要不是我知道怎么旋转，我还想问为什么上下都有黄色。
但这个时候如果我们要感受3d的旋转。我们可以就可以类似把镜头拉远一点，然后我们就能看出我们想要的结果了。我们把上面的代码改成以下这样。给body一个perspective。
<html lang="en">
<head>
<title>Title</title>
</head>
<body style="background-color: yellow; height: 100%; margin: 0; overflow: hidden; perspective: 100px; width: 100%;">
<div class="buttonList" style="background-color: red; height: 100%; transform: rotateX(10deg); width: 100%;">
aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa
</div>
</body>
</html>
这感觉是不是就真实多了。像一张纸在我们面前旋转了呢。
好了今天就到这了，我接着玩去咯。
Chrome 和 Safari 支持替代的 -webkit-perspective 属性。
perspective: number|none;
-webkit-perspective: number|none; /* Safari and Chrome */
这个属性定义3D元素距离视图的距离。他的备注里面还有个这个元素：perspective 属性只影响 3D 转换元素。
原来不懂他到底是干什么的。但今天在一个例子中看到了这个，测试了一下，看出效果了。好激动啊。在这里备注一下，啦啦啦。大家快来看看啊。
事情是这样的，我本来在测试旋转。沿X轴旋转
<html lang="en">
<head>
<title>Title</title>
</head>
<body style="background-color: yellow; height: 100%; margin: 0; width: 100%;">
<div class="buttonList" style="background-color: red; height: 100%; transform: rotateX(10deg); width: 100%;">
aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa
</div>
</body>
</html>
但其实这个就算旋转了也并不明显，要不是我知道怎么旋转，我还想问为什么上下都有黄色。
但这个时候如果我们要感受3d的旋转。我们可以就可以类似把镜头拉远一点，然后我们就能看出我们想要的结果了。我们把上面的代码改成以下这样。给body一个perspective。
<html lang="en">
<head>
<title>Title</title>
</head>
<body style="background-color: yellow; height: 100%; margin: 0; overflow: hidden; perspective: 100px; width: 100%;">
<div class="buttonList" style="background-color: red; height: 100%; transform: rotateX(10deg); width: 100%;">
aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa
</div>
</body>
</html>
这感觉是不是就真实多了。像一张纸在我们面前旋转了呢。
好了今天就到这了，我接着玩去咯。
本文标签： cssperspective
版权声明：本文标题：css-perspective-1.2 内容由热心网友自发贡献，该文观点仅代表作者本人， 转载请联系作者并注明出处：https://it.en369.cn/jiaocheng/1758749966a2783702.html， 本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌抄袭侵权/违法违规的内容，一经查实，本站将立刻删除。
发表评论