CSS3中设置3D变形的transform-style属性详解_transform-style:preserve-3d - CSDN文库

71 浏览量更新于2023-05-04 评论收藏 173KB PDF 举报

身份认证购VIP最低享 7 折!

领优惠券(最高得80元）

资源详情

资源评论

资源推荐

CSS3中设置中设置3D变形的变形的transform-style属性详解属性详解

transform-style属性是3D空间一个重要属性，指定嵌套元素如何在3D空间中呈现。他主要有两个属性值：flat和preserve-3d。

transform-style属性的使用语法非常简单：

CSS Code复制内容到剪贴板

transform-style: flat | preserve-3d

其中flat值为默认值，表示所有子元素在2D平面呈现。preserve-3d表示所有子元素在3D空间中呈现。

也就是说，如果对一个元素设置了transform-style的值为flat，则该元素的所有子元素都将被平展到该元素的2D平面中进行呈

现。沿着X轴或Y轴方向旋转该元素将导致位于正或负Z轴位置的子元素显示在该元素的平面上，而不是它的前面或者后面。如

果对一个元素设置了transform-style的值为preserve-3d，它表示不执行平展操作，他的所有子元素位于3D空间中。

transform-style属性需要设置在父元素中，并且高于任何嵌套的变形元素。最后，我们运用一个翻转的例子，来加深一下对

transform-style属性的印象：

HTML模板

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

<div class="wrap">

<div class="spin">

<div class="rotate">

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

</div>

</div>

</div>

<div class="wrap">

<div class="spin">

<div class="rotate three-d">

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

</div>

</div>

</div>

CSS

CSS Code复制内容到剪贴板

.wrap {

width: 500px;

height: 300px;

margin: 30px auto;

position: relative;

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

background-size: 100% 100%;

}

/*设置动画*/

@keyframes spin{

0%{

transform:rotateY(0deg)

}

100%{

transform:rotateY(360deg)

}

}

.spin {

width: 142px;

height: 200px;

position: absolute;

top: 50%;

left: 50%;

margin-left: -72px;

margin-top: -101px;

border: 1px dashed orange;

cursor: pointer;

transform-style: preserve-3d;

本内容试读结束，登录后可阅读更多

下载后可阅读完整内容，剩余2页未读，立即下载

评论0

weixin_38553275

粉丝: 5
资源: 917

会员权益专享

图片转文字

全年可省5，000元立即开通

最新资源

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