HTML+CSS完成3D相册

柒小染️

已于 2022-10-24 11:15:09 修改

阅读量572

点赞数 1

分类专栏： HTNL5 文章标签： css html

于 2022-10-24 11:09:54 首次发布

本文链接：https://blog.csdn.net/weixin_55763489/article/details/127488220

版权

HTNL5 专栏收录该内容

1 篇文章 0 订阅

订阅专栏

正在学习HTML，太闲了刷视频的时候看见了3D相册，就自己写着试试，使用CSS和HTML制作3D旋转相册,真的是超级有趣。你也可以试试。

准备6张图片，放在与html文件同级的image目录下.

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title>3d相册</title>
    <link rel="stylesheet" href="css/3d.css">
  </head>
  <body>
    <div class="box">
      <div class="qian">
        <img src="image/03.jpg">
      </div>
      <div class="hou">
        <img src="image/01.jpg">
      </div>
         <div class="shang">
        <img src="image/04.jpg">
      </div>
      <div class="xia">
        <img src="image/05.jpg">
      </div>
         <div class="zuo">
        <img src="image/02.jpg">
      </div>
      <div class="you">
        <img src="image/06.jpg">
      </div>
    </div>
  </body>
</html>

相关css代码如下（3d.css）

css文件放在与html同级的csswenji

div{
	width: 300px;
	height: 300px;
}
.box{
	width: 300px;
	height: 300px;
	transform-style: preserve-3d;
	padding-left: 400px;
	padding-top: 300px;
	animation: move 5s linear infinite;
}
.box:hover{
	transform: rotateX(360deg) rotateY(360deg);

}
.qian{
	background-color: pink;
	position: absolute;
	transform: translateZ(150px);
}
.hou{
	background-color: blue;
	position: absolute;
	transform: translateZ(-150px);
}

.shang{
	background-color: bisque;
	position: absolute;
	transform: translateY(-150px) rotateX(90deg);
}

.xia{
	background-color: aqua;
	position: absolute;
	transform:translateY(150px) rotateX(90deg);
}

.zuo{
	background-color: orange;
	position: absolute;
	transform: translateX(-150px) rotateY(90deg);
}
.you{
	background-color: orange;
	position: absolute;
	transform: translateX(150px) rotateY(90deg);
}
div div{
	opacity: 0.9;
}
@keyframes move{
	0%{
		transform: rotateX(0) rotateY(0) rotateZ(0);
	}
	100%{
		transform: rotateX(360deg) rotateY(360deg) rotateZ(360deg);
	}

}
.div:hover .qian{
	width: 300px;
	height: 300px;
	transform: translateZ(200px);
}

.div:hover .hou{
	width: 300px;
	height: 300px;
	transform: translateZ(-200px);
}
.div:hover .zuo{
	width: 300px;
	height: 300px;
	transform: translateX(-200px) rotateY(90deg);
}
.div:hover .you{
	width: 300px;
	height: 300px;
	transform: translateX(200px) rotateY(90deg);
}
.div:hover .shang{
	width: 300px;
	height: 300px;
	transform: translateY(200px) rotateX(-90deg);
}
.div:hover .xia{
	width: 300px;
	height: 300px;
	transform: translateY(-200px) rotateX(90deg);
}