css-perspective-1.2

最新推荐文章于 2024-10-03 16:00:14 发布

彩舒

最新推荐文章于 2024-10-03 16:00:14 发布

阅读量192

点赞数 1

分类专栏：前端技术文章标签： 3D css

本文链接：https://blog.csdn.net/caishu1995/article/details/82978140

版权

前端技术专栏收录该内容

105 篇文章 1 订阅

订阅专栏

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>

加入perspective