CSS3-3D转换效果

最新推荐文章于 2023-04-04 10:09:29 发布

蓬莱老仙

最新推荐文章于 2023-04-04 10:09:29 发布

阅读量303

点赞数

分类专栏： CSS3

本文链接：https://blog.csdn.net/weixin_44486539/article/details/104147027

版权

CSS3 专栏收录该内容

20 篇文章 2 订阅

订阅专栏

本文介绍了CSS3中的3D转换效果，通过`transform-style`属性可以实现子元素在3D空间的呈现。示例中详细展示了如何使用CSS3创建一个正方体，包括设置边框、平移和旋转等技巧。

摘要由CSDN通过智能技术生成

CSS3 中是通过 transform-style 样式属性来实现 3D 立体效果的，为父元素设置了该属性其子元素就会具有 3D 效果，对应的属性值如下：

flat 所有子元素在2D平面呈现
preserve-3d 所有子元素在3D空间中呈现

举个例子：

CSS:

.box {
  width: 300px;
  height: 300px;
  margin: 20px auto;
  /* 过渡 */
  transition: transform 1s;
  /* 通过该属性可以给其子元素设置真正的 3D 立体效果 */
  transform-style: preserve-3d;
  /* 父盒子沿着 Y 轴旋转 */
  transform: rotateY(10deg);
  background: skyblue;
  border: 1px solid gray;
}

.section {
  width: 200px;
  height: 200px;
  margin: 50px;
  /* 子盒子沿着 X 轴旋转 */
  transform: rotateX(20deg);
  background-color: #f00;
}

.box:hover {
  /* 父盒子沿着 Y 轴旋转 */
  transform: rotateY(89deg);
}

HTML:

<div class="box">
  <div class="section"></div>
</div>

在这里插入图片描述

实现一个正方体效果：

主要是通过父元素的四条边和前后面来构成正方体的六个面，再结合 transform-style、平移和旋转等方法就可以实现。

CSS:

* {
  margin: 0;
  padding: 0;
}

/* 父元素 */
.box {
  position: relative;
  width: 200px;
  height: 200px;
  margin: 100px auto;
  font-size: 60px;
  text-align: center;
  line-height: 200px;
  /* 设置过渡 */
  transition: transform 2s;
  /* 设置转换样式为 3D */
  transform-style: preserve-3d;
  transform: rotateX(15deg) rotateY(-48deg);
  border: 1px solid #000;
}

.box:hover {
  /* 鼠标放上时让其旋转 */
  transform: rotateX(300deg) rotateY(300deg);
}

.box div {
  position: absolute;
  width: 100%;
  height: 100%;
  box-sizing: border-box;
  border: 1px solid #999;
}

/* 上 */
.top {
  background-color: rgb(135, 206, 235);
  /* 沿着 Y 轴向上平移 50%，再沿 X 轴旋转 90 度 */
  transform: translateY(-50%) rotateX(90deg);
}
/* 下 */
.bottom {
  background-color: rgb(0, 128, 0);
  /* 沿着 Y 轴向下平移 50%，再沿着 X 轴旋转 -90 度 */
  transform: translateY(50%) rotateX(-90deg);
}
/* 左 */
.left {
  background-color: rgb(0, 0, 255);
  /* 沿着 X 轴向左平移 50%，再沿着 Y 轴旋转 -90 度 */
  transform: translateX(-50%) rotateY(-90deg);
}
/* 右 */
.right {
  background-color: yellow;
  /* 沿着 X 向右平移 50%，再沿着 Y 轴旋转 90的 度 */
  transform: translateX(50%) rotateY(90deg);
}
/* 前 */
.front {
  background-color: rgb(255, 0, 0);
  /* 沿着 Z 轴向前平移 100 像素 */
  transform: translateZ(100px);
}
/* 后 */
.back {
  background-color: purple;
  /* 沿着 Z 轴向后平移 100 像素 */
  transform: translateZ(-100px);
}

HTML:

<div class="box">
  <div class="top">上</div>
  <div class="bottom">下</div>
  <div class="left">左</div>
  <div class="right">右</div>
  <div class="front">前</div>
  <div class="back">后</div>
</div>