36D图片-优快云博客

本文链接：https://blog.youkuaiyun.com/xiaokuangren_/article/details/121727677

这篇博客通过HTML和CSS展示了如何创建一个3D立体图片效果。利用`transform-style: preserve-3d`和`transform`属性，结合关键帧动画，实现了3D旋转和缩放效果。当鼠标悬停在元素上时，图片会扩大并改变位置，呈现立体视觉。同时，代码中用到了多个背景图片，分别应用于不同的子元素，以达到3D盒模型的展示。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

三D图片

html部分

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8" />
    <title>3Dbox</title>
    <link rel="stylesheet" type="text/css" href="./css/index.css" />
  </head>
  <body>
    <!-- div.box按下tab -->
    <div class="box">
      <!-- ul.minbox>li*6 按下tab -->
      <ul class="minbox">
        <li></li>
        <li></li>
        <li></li>
        <li></li>
        <li></li>
        <li></li>
      </ul>
      <ul class="maxbox">
        <li></li>
        <li></li>
        <li></li>
        <li></li>
        <li></li>
        <li></li>
      </ul>
    </div>
  </body>
</html>

css部分

* {
  margin: 0; /*去掉外边距*/
  padding: 0; /*去掉内边距*/
}

.box {
  width: 200px; /*宽度*/
  height: 200px; /*高度*/
  position: absolute; /*绝对定位*/
  top: 30%; /*与顶部的距离*/
  left: 40%; /*与左侧的距离*/
  transform-style: preserve-3d; /*^_^只有设置了此属性才有z轴*/
  transform: rotateX(-90deg); /*绕x轴旋转*/
  /*使用动画*/
  animation: move 10s 100 linear;
  /*动画名称  动画执行的时间  次数   匀速*/
}
ul {
  list-style: none; /*去掉点*/
}
/*定义动画*/
@keyframes move {
  from {
    transform: rotateX(-30deg) rotateY(0deg);
  }
  to {
    transform: rotateX(-30deg) rotateY(360deg);
  }
}

/*小盒子*/
.minbox {
  width: 100px; /*宽度*/
  height: 100px; /*高度*/
  position: absolute; /*绝对定位*/
  left: 50px;
  top: 50px;
  transform-style: preserve-3d; /*设置为3d图形*/
}
.minbox > li:nth-child(1) {
  width: 100px;
  height: 100px;
  border: 1px solid black; /*边框宽度  样式   颜色*/
  font-size: 50px; /*设置字体大小*/
  text-align: center; /*文本水平居中*/
  line-height: 100px; /*让行高等于高度,达到垂直居中的效果*/
  position: absolute;
  left: 0;
  top: 0;
  background-image: url(../img/1.jpg);
  background-size: 100px 100px;
  transform: translateZ(50px);
}
.minbox > li:nth-child(2) {
  width: 100px;
  height: 100px;
  border: 1px solid black; /*边框宽度  样式   颜色*/
  font-size: 50px; /*设置字体大小*/
  text-align: center; /*文本水平居中*/
  line-height: 100px; /*让行高等于高度,达到垂直居中的效果*/
  position: absolute;
  left: 0;
  top: 0;
  background-image: url(../img/2.jpg);
  background-size: 100px 100px;
  transform: translateZ(-50px);
}
.minbox > li:nth-child(3) {
  width: 100px;
  height: 100px;
  border: 1px solid black; /*边框宽度  样式   颜色*/
  font-size: 50px; /*设置字体大小*/
  text-align: center; /*文本水平居中*/
  line-height: 100px; /*让行高等于高度,达到垂直居中的效果*/
  position: absolute;
  left: 0;
  top: 0;
  background-image: url(../img/3.jpg);
  background-size: 100px 100px;
  transform: rotateY(90deg) translateZ(50px);
}
.minbox > li:nth-child(4) {
  width: 100px;
  height: 100px;
  border: 1px solid black; /*边框宽度  样式   颜色*/
  font-size: 50px; /*设置字体大小*/
  text-align: center; /*文本水平居中*/
  line-height: 100px; /*让行高等于高度,达到垂直居中的效果*/
  position: absolute;
  left: 0;
  top: 0;
  background-image: url(../img/4.jpg);
  background-size: 100px 100px;
  transform: rotateY(90deg) translateZ(-50px);
}
.minbox > li:nth-child(5) {
  width: 100px;
  height: 100px;
  border: 1px solid black; /*边框宽度  样式   颜色*/
  font-size: 50px; /*设置字体大小*/
  text-align: center; /*文本水平居中*/
  line-height: 100px; /*让行高等于高度,达到垂直居中的效果*/
  position: absolute;
  left: 0;
  top: 0;
  background-image: url(../img/5.jpg);
  background-size: 100px 100px;
  transform: rotateX(90deg) translateZ(50px);
}
.minbox > li:nth-child(6) {
  width: 100px;
  height: 100px;
  border: 1px solid black; /*边框宽度  样式   颜色*/
  font-size: 50px; /*设置字体大小*/
  text-align: center; /*文本水平居中*/
  line-height: 100px; /*让行高等于高度,达到垂直居中的效果*/
  position: absolute;
  left: 0;
  top: 0;
  background-image: url(../img/6.jpg);
  background-size: 100px 100px;
  transform: rotateX(90deg) translateZ(-50px);
}

/*大盒子*/
.maxbox {
  width: 200px; /*宽度*/
  height: 200px; /*高度*/
  position: absolute; /*绝对定位*/
  left: 0;
  top: 0;
  transform-style: preserve-3d; /*设置为3d图形*/
}

.maxbox > li:nth-child(1) {
  width: 200px;
  height: 200px;
  border: 1px solid black; /*边框宽度  样式   颜色*/
  font-size: 50px; /*设置字体大小*/
  text-align: center; /*文本水平居中*/
  line-height: 200px; /*让行高等于高度,达到垂直居中的效果*/
  position: absolute;
  left: 0;
  top: 0;
  background-image: url(../img/1.jpg);
  background-size: 200px 200px;
  opacity: 0.8;
  transform: translateZ(100px);
}
.maxbox > li:nth-child(2) {
  width: 200px;
  height: 200px;
  border: 1px solid black; /*边框宽度  样式   颜色*/
  font-size: 50px; /*设置字体大小*/
  text-align: center; /*文本水平居中*/
  line-height: 200px; /*让行高等于高度,达到垂直居中的效果*/
  position: absolute;
  left: 0;
  top: 0;
  background-image: url(../img/2.jpg);
  background-size: 200px 200px;
  opacity: 0.8;
  transform: translateZ(-100px);
}
.maxbox > li:nth-child(3) {
  width: 200px;
  height: 200px;
  border: 1px solid black; /*边框宽度  样式   颜色*/
  font-size: 50px; /*设置字体大小*/
  text-align: center; /*文本水平居中*/
  line-height: 200px; /*让行高等于高度,达到垂直居中的效果*/
  position: absolute;
  left: 0;
  top: 0;
  background-image: url(../img/3.jpg);
  background-size: 200px 200px;
  opacity: 0.8;
  transform: rotateY(90deg) translateZ(100px);
}
.maxbox > li:nth-child(4) {
  width: 200px;
  height: 200px;
  border: 1px solid black; /*边框宽度  样式   颜色*/
  font-size: 50px; /*设置字体大小*/
  text-align: center; /*文本水平居中*/
  line-height: 200px; /*让行高等于高度,达到垂直居中的效果*/
  position: absolute;
  left: 0;
  top: 0;
  background-image: url(../img/4.jpg);
  background-size: 200px 200px;
  opacity: 0.8;
  transform: rotateY(90deg) translateZ(-100px);
}
.maxbox > li:nth-child(5) {
  width: 200px;
  height: 200px;
  border: 1px solid black; /*边框宽度  样式   颜色*/
  font-size: 50px; /*设置字体大小*/
  text-align: center; /*文本水平居中*/
  line-height: 200px; /*让行高等于高度,达到垂直居中的效果*/
  position: absolute;
  left: 0;
  top: 0;
  background-image: url(../img/5.jpg);
  background-size: 200px 200px;
  opacity: 0.8;
  transform: rotateX(90deg) translateZ(100px);
}
.maxbox > li:nth-child(6) {
  width: 200px;
  height: 200px;
  border: 1px solid black; /*边框宽度  样式   颜色*/
  font-size: 50px; /*设置字体大小*/
  text-align: center; /*文本水平居中*/
  line-height: 200px; /*让行高等于高度,达到垂直居中的效果*/
  position: absolute;
  left: 0;
  top: 0;
  background-image: url(../img/6.jpg);
  background-size: 200px 200px;
  opacity: 0.8;
  transform: rotateX(90deg) translateZ(-100px);
}

.box:hover ul.maxbox > li {
  width: 400px;
  height: 400px;
  background-size: 400px 400px;
  top: -100px;
  left: -100px;
}

.box:hover ul.maxbox > li:nth-child(1) {
  transform: translateZ(300px);
}

.box:hover ul.maxbox > li:nth-child(2) {
  transform: translateZ(-300px);
}

.box:hover ul.maxbox > li:nth-child(3) {
  transform: rotateY(90deg) translateZ(300px);
}

.box:hover ul.maxbox > li:nth-child(4) {
  transform: rotateY(90deg) translateZ(-300px);
}

.box:hover ul.maxbox > li:nth-child(5) {
  transform: rotateX(90deg) translateZ(300px);
}

.box:hover ul.maxbox > li:nth-child(6) {
  transform: rotateX(90deg) translateZ(-300px);
}