详解CSS3的perspective属性设置3D变换距离的方法资源-CSDN文库

23 浏览量 2021-01-19 20:43:58 上传评论收藏 427KB PDF 举报

资源推荐

资源详情

资源评论

详解详解CSS3的的perspective属性设置属性设置3D变换距离的方法变换距离的方法

perspective属性对于3D变形来说至关重要。该属性会设置查看者的位置，并将可视内容映射到一个视锥上，继而投到一个2D

视平面上。如果不指定透视，则Z轴空间中的所有点将平铺到同一个2D视平面中，并且变换结果中将不存在景深概念。

上面的描述可能让人难以理解一些，其实对于perspective属性，我们可以简单的理解为视距，用来设置用户和元素3D空间Z平

面之间的距离。而其效应由他的值来决定，值越小，用户与3D空间Z平面距离越近，视觉效果更令人印象深刻；反之，值越

大，用户与3D空间Z平面距离越远，视觉效果就很小。

在3D变形中，对于某些变形，例如下面的示例演示的沿Z轴的变形，perspective属性对于查看变形的效果来说必不可少。

我们先来看一个简单的实例，制作一个扑克牌3D旋转效果，并且一个在扑克牌的父元素添加了视距perspective，而另一个却

没有设置：

HTML

XML/HTML Code复制内容到剪贴板

<div>

<img src="images/cardKingClub.png" alt="" width="142" height="200" />

<img src="images/cardKingClub.png" alt="" width="142" height="200" />

</div>

<div>

<img src="images/cardKingClub.png" alt="" width="142" height="200" />

<img src="images/cardKingClub.png" alt="" width="142" height="200" />

</div>

CSS

CSS Code复制内容到剪贴板

div {

width: 500px;

height: 300px;

margin: 30px auto;

position: relative;

background: url(images/bg-grid.jpg) no-repeat center center;

background-size: 100% 100%;

}

div img {

position: absolute;

top: 50%;

left: 50%;

margin-left: -71px;

margin-top: -100px;

transform-origin: bottombottom;

}

div img:nth-child(1){

opacity: .5;

z-index: 1;

}

div img:nth-child(2){

z-index: 2;

transform: rotateX(45deg);

}

div:nth-of-type(2){

perspective: 500px;

}

其效果如下：

剩余6页未读，继续阅读

内容反馈

weixin_38627104

粉丝: 1
资源: 983

最新资源

资源上传下载、课程学习等过程中有任何疑问或建议，欢迎提出宝贵意见哦~我们会及时处理！点击此处反馈

feedback-tip