transform-style属性

老师，为什么加上transform-style: preserve-3d后，就变成下面这样了，前面学习transform-style这个属性的时候，好像没有讲到这一点。

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Document</title>
<style>
.cube{
display: inline-block;
width: 100px;
height:100px;
margin:50px;
-webkit-transform-style: preserve-3d;
transform-style: preserve-3d;
}

.cube > div { position: absolute; width: 100%; height: 100%; box-shadow: inset 0 0 15px rgba(0, 0, 0, .2); background-color: rgba(255, 255, 255, .1); color: gray; font-size: 20px; line-height: 100px; text-align: center; }

</style>
</head>
<body>
<div class="cube c1">
    <div class="front">1</div>
    <div class="back">2</div>
    <div class="right">3</div>
    <div class="left">4</div>
    <div class="top">5</div>
    <div class="bottom">6</div>
</div>
<!--  <div class="cube c2">
    <div class="front">1</div>
    <div class="back">2</div>
    <div class="right">3</div>
    <div class="left">4</div>
    <div class="top">5</div>
    <div class="bottom">6</div>
</div> -->
</body>
</html>

CoffeePlayer 2021-03-23

源自：CSS3转换 6-6 backface-visibility

收起

1回答

好帮手慕然然 2021-03-24 11:05:56

同学你好，transform-style: preserve-3d; 这句代码指的是设置元素在三维空间显示。没加它之前是以2D效果展示的，加上它之后你看到的是3D效果（这个属性老师在第六章第一节讲哟）。但是同学的代码3D效果没有出现，是因为缺少其他属性的设置

1. 缺少perspective属性的设置：用来指定观察者与平面的距离，使具有三维位置变换的元素产生透视效果。

缺少perspective-origin属性设置：指定透视点位置。建议同学观看第6章视频，这些老师都有讲解。

添加代码如下：

2. 缺少上下前后左右六个平面盒子的位置调整代码

祝学习愉快！

收起回答

提问者 CoffeePlayer #1

老师，我知道transform-style的这些属性，我的意思是，这里绝对定位的width和height设置为100%，相当于最近定位祖先元素宽高的100%，而这里没有最近定位祖先元素，所以是相当于body宽高的100%，但是当加上transform-style: preserve-3d;这个属性后，绝对定位的宽和高都变成了100px，这是什么原因呢？

2021-04-01 00:48:10
好帮手慕然然回复提问者 CoffeePlayer #2

同学你好，当给子元素设置绝对定位后会脱离文档流，由于父元素没有设置相对定位，所以脱离文档流之后不再受父元素的限制，会相对于body元素显示，所以宽高为body的100%，但是由于transform-style:preserve-3d;属性是用来规定子元素在3D空间中呈现，所以当给父元素.cube设置transform-style:preserve-3d;后，子元素会在3D空间中呈现，因此会相对于父元素的宽高去显示（其效果有点类似于position:relative;的作用），此时子元素的宽高100%是占父元素宽高（200px）的100%。祝学习愉快~

2021-04-01 12:51:11