3D旋转相册代码（未工程化）

用户9999906

发布于 2022-09-26 11:40:27

7040

发布于 2022-09-26 11:40:27

文章被收录于专栏：学编程的GISer学编程的GISer

上次分享了Vue工程化之后的相册代码，今天整理文件的时候发现了之前写的没有工程化的，为了方便大家搬运代码，在这里分享一下，需要的小伙伴可复制粘贴：

html部分：

<!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部分：

* {
  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%3A%2F%2Fc2.hoopchina.com.cn%2Fuploads%2Fstar%2Fevent%2Fimages%2F180616%2Fbf26b6d2263e8acb391d43081d9ac4f6932fff8e.jpg&refer=http%3A%2F%2Fc2.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%3A%2F%2F5b0988e595225.cdn.sohucs.com%2Fimages%2F20180627%2F5a75357b067d4d6eb7576ea9ebcf4c2a.gif&refer=http%3A%2F%2F5b0988e595225.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%3A%2F%2Fwww.zhwin.com%2Fd%2Ffile%2F2018-12-26%2Fd1c2c3e8a97754402dd95f4701a2f854.jpg&refer=http%3A%2F%2Fwww.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%3A%2F%2Fimg.mp.itc.cn%2Fq_70%2Cc_zoom%2Cw_640%2Fupload%2F20170220%2F2017b5b57abd4e3fbfa42fb15855fa6d_th.jpeg&refer=http%3A%2F%2Fimg.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%3A%2F%2Fwx3.sinaimg.cn%2Fmw690%2F737e214fgy1h2btpttqxtj20u00u0jxi.jpg&refer=http%3A%2F%2Fwx3.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%3A%2F%2Finews.gtimg.com%2Fnewsapp_bt%2F0%2F14137930887%2F1000.jpg&refer=http%3A%2F%2Finews.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%3A%2F%2Fdingyue.ws.126.net%2F2020%2F0202%2Fa6b9f858j00q52398003yc000sg00sgm.jpg&refer=http%3A%2F%2Fdingyue.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%3A%2F%2Fn.sinaimg.cn%2Fsinakd20211215s%2F384%2Fw2048h1536%2F20211215%2Fd9d5-6f8da10cddb93c7cff37257294d0bec4.jpg&refer=http%3A%2F%2Fn.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%3A%2F%2Fc-ssl.duitang.com%2Fuploads%2Fblog%2F202110%2F11%2F20211011001243_6dbb7.thumb.1000_0.jpg&refer=http%3A%2F%2Fc-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);
}

本文参与?腾讯云自媒体同步曝光计划，分享自微信公众号。

原始发表：2022-05-24，如有侵权请联系?cloudcommunity@tencent.com 删除

css