如何为经CSS 3D变换的iframe添加厚度效果？

要让iframe呈现带厚度的平板质感，我们可以利用CSS 3D变换和伪元素模拟侧面厚度，结合现有透视效果增强立体感。以下是修改后的完整代码：

完整代码 #

HTML #

<div class="media_item">
  <div class="iframe-container">
    <iframe id="myIframe" src="https://www.wikipedia.org/" width="1440" height="800"></iframe>
  </div>
</div>

CSS #

.media_item {
  width: 70vw;
  height: 40vw;
  background-color: rgb(220, 220, 220);
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
  /* 给父容器统一添加透视，让3D效果更协调 */
  perspective: 120vw;
}

.iframe-container {
  width: 50vw;
  height: calc(50vw / 1.8);
  overflow: hidden;
  transform: rotateY(30deg);
  /* 开启3D空间，确保伪元素能在3D环境中渲染 */
  transform-style: preserve-3d;
  position: relative;
}

#myIframe {
  transform-origin: 0 0;
  border: none;
  width: 100%;
  height: 100%;
  /* 初始缩放适配容器 */
  transform: scale(calc(50vw / 1440));
}

/* 模拟平板左侧厚度 */
.iframe-container::before {
  content: '';
  position: absolute;
  top: 0;
  right: 0;
  width: 2vw; /* 厚度宽度，可按需调整 */
  height: 100%;
  background-color: #333; /* 侧面颜色 */
  /* 将伪元素旋转到3D空间的侧面 */
  transform: rotateY(90deg) translateX(50%);
  transform-origin: right center;
  z-index: -1; /* 避免遮挡iframe内容 */
}

/* 可选：添加顶部厚度增强层次 */
.iframe-container::after {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 2vw; /* 厚度高度 */
  background-color: #444; /* 顶部侧面颜色，略深于左侧增强真实感 */
  transform: rotateX(-90deg) translateY(-50%);
  transform-origin: top center;
  z-index: -1;
}

JavaScript #

function scaleIframe() {
  const scale = window.innerWidth * 0.50 / 1440;
  document.getElementById('myIframe').style.transform = `scale(${scale})`;
}

scaleIframe();
window.onresize = scaleIframe;

关键修改说明 #

• 开启3D空间：给.iframe-container添加transform-style: preserve-3d，确保伪元素不会被扁平化，能在3D透视环境中正确显示。
• 伪元素模拟厚度：用::before和::after分别生成左侧和顶部的厚度面，通过旋转变换将它们定位到平板的对应侧面，再用位移调整位置使其贴合主面板。
• 统一透视视角：把perspective移到.media_item容器，让整个3D元素共享同一透视效果，视觉更自然。
• 适配初始缩放：在CSS中设置iframe的初始缩放比例，避免页面加载时的错位，JS仅负责窗口 resize 时的动态调整。

你可以根据需求修改厚度尺寸、侧面颜色，甚至添加更多伪元素模拟其他面的厚度，进一步提升真实感。

内容的提问来源于stack exchange，提问作者Anna_B