上次分享了Vue工程化之后的相册代码，今天整理文件的时候发现了之前写的没有工程化的，为了方便大家搬运代码，在这里分享一下，需要的小伙伴可复制粘贴：
html部分：
代码语言：javascript复制<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>3D旋转相册</title>
<link rel="stylesheet" href="./index.css" />
</head>
<body>
<div class="background">
<div class="wrap">
<span class="in-front">front</span>
<span class="in-back">back</span>
<span class="in-left">left</span>
<span class="in-right">right</span>
<span class="in-top">top</span>
<span class="in-bottom">bottom</span>
<!-- 外层： -->
<div class="out-front"></div>
<div class="out-back"></div>
<div class="out-left"></div>
<div class="out-right"></div>
<div class="out-top"></div>
<div class="out-bottom"></div>
</div>
</div>
</body>
</html>css部分：
代码语言：javascript复制* {
padding: 0;
margin: 0;
}
html,
body {
height: 100%;
width: 100%;
position: relative;
}
.background {
width: 100%;
height: 100%;
background-image: url(https://wimg.588ku.com/gif620/20/09/09/5a07e514eb72b1fce52ee9a447d0237d.gif);
background-repeat: x-repeat;
background-size: 66%;
position: relative;
top: 0;
bottom: 0;
left: 0;
right: 0;
margin: auto;
}
.wrap span {
display: block;
height: 100px;
width: 100px;
background-color: skyblue;
position: absolute;
top: 50px;
left: 50px;
}
/* 让wrap旋转 */
.wrap {
height: 200px;
width: 200px;
position: absolute;
left: 0;
right: 0;
top: 0;
bottom: 0;
margin: auto;
margin: 200px auto;
animation: rotate 10s infinite;
/* 设置3D效果: */
transform-style: preserve-3d;
animation-timing-function: linear;
}
/* 里面的拼接为正方形 */
.in-front {
transform: translateZ(50px);
background-size: 100%;
background-image: url(https://gimg2.baidu.com/image_search/src=http://c2.hoopchina.com.cn/uploads/star/event/images/180616/bf26b6d2263e8acb391d43081d9ac4f6932fff8e.jpg&refer=http://c2.hoopchina.com.cn&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=auto?sec=1655964439&t=cb5cc944162de8e5d73267a99c1d29bf);
}
.in-back {
transform: translateZ(-50px);
background-size: 100%;
background-image: url(https://gimg2.baidu.com/image_search/src=http://5b0988e595225.cdn.sohucs.com/images/20180627/5a75357b067d4d6eb7576ea9ebcf4c2a.gif&refer=http://5b0988e595225.cdn.sohucs.com&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=auto?sec=1655964439&t=7415410490ba85c4a18c6d185fe2d77c);
}
.in-left {
transform: rotateY(90deg) translateZ(50px);
background-size: 100%;
background-image: url(https://gimg2.baidu.com/image_search/src=http://www.zhwin.com/d/file/2018-12-26/d1c2c3e8a97754402dd95f4701a2f854.jpg&refer=http://www.zhwin.com&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=auto?sec=1655964439&t=615254a7048743bdea81a94c62a0fc4d);
}
.in-right {
transform: rotateY(-90deg) translateZ(50px);
background-size: 100%;
background-image: url(https://img2.baidu.com/it/u=37481648,853186833&fm=253&fmt=auto&app=138&f=JPEG?w=707&h=500);
}
.in-top {
transform: rotateX(90deg) translateZ(50px);
background-size: 100%;
background-image: url(https://gimg2.baidu.com/image_search/src=http://img.mp.itc.cn/q_70,c_zoom,w_640/upload/20170220/2017b5b57abd4e3fbfa42fb15855fa6d_th.jpeg&refer=http://img.mp.itc.cn&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=auto?sec=1655964633&t=667e5f68ff51d095d2ffc2912cfa4ba5);
}
.in-bottom {
transform: rotateX(-90deg) translateZ(50px);
background-size: 100%;
background-image: url(https://gimg2.baidu.com/image_search/src=http://wx3.sinaimg.cn/mw690/737e214fgy1h2btpttqxtj20u00u0jxi.jpg&refer=http://wx3.sinaimg.cn&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=auto?sec=1655963878&t=e408582fd08c8402b0138ba65b754301);
}
/* 动态函数： */
@keyframes rotate {
0% {
transform: rotateX(0deg) rotate(0deg);
}
100% {
transform: rotateX(360deg) rotate(360deg);
}
}
/* 设置外层立方体样式： */
.wrap div {
height: 200px;
width: 200px;
background-color: salmon;
position: absolute;
transition: all 0.6s;
}
/* 外面的拼接为正方形 */
.out-front {
transform: translateZ(100px);
background-size: 100%;
background-image: url(https://img2.baidu.com/it/u=681006353,778548870&fm=253&fmt=auto&app=120&f=JPEG?w=1280&h=723);
}
.out-back {
transform: translateZ(-100px);
background-size: 100%;
background-image: url(https://gimg2.baidu.com/image_search/src=http://inews.gtimg.com/newsapp_bt/0/14137930887/1000.jpg&refer=http://inews.gtimg.com&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=auto?sec=1655963878&t=0d8a6e7ba326ea2ba688be069038c6b6);
}
.out-left {
transform: rotateY(90deg) translateZ(100px);
background-size: 100%;
background-image: url(https://gimg2.baidu.com/image_search/src=http://dingyue.ws.126.net/2020/0202/a6b9f858j00q52398003yc000sg00sgm.jpg&refer=http://dingyue.ws.126.net&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=auto?sec=1655964193&t=7da3c116ce0d6ab608accf5f7d1fe50a);
}
.out-right {
transform: rotateY(-90deg) translateZ(100px);
background-size: 100%;
background-image: url(https://gimg2.baidu.com/image_search/src=http://n.sinaimg.cn/sinakd20211215s/384/w2048h1536/20211215/d9d5-6f8da10cddb93c7cff37257294d0bec4.jpg&refer=http://n.sinaimg.cn&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=auto?sec=1655964265&t=506ebede3c15ccb61c49dfef61b49f22);
}
.out-top {
transform: rotateX(90deg) translateZ(100px);
background-size: 100%;
background-image: url(https://gimg2.baidu.com/image_search/src=http://c-ssl.duitang.com/uploads/blog/202110/11/20211011001243_6dbb7.thumb.1000_0.jpg&refer=http://c-ssl.duitang.com&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=auto?sec=1655964265&t=457195f8c2d06474ed16b0a1dd98fe04);
}
.out-bottom {
transform: rotateX(-90deg) translateZ(100px);
background-size: 100%;
background-image: url(https://img2.baidu.com/it/u=423115731,3023018397&fm=253&fmt=auto&app=138&f=JPEG?w=500&h=399);
}
.wrap:hover .out-front {
transform: translateZ(200px);
}
.wrap:hover .out-back {
transform: translateZ(-200px);
}
.wrap:hover .out-left {
transform: rotateY(90deg) translateZ(200px);
}
.wrap:hover .out-right {
transform: rotateY(-90deg) translateZ(200px);
}
.wrap:hover .out-top {
transform: rotateX(90deg) translateZ(200px);
}
.wrap:hover .out-bottom {
transform: rotateX(-90deg) translateZ(200px);
}
