web前端进阶＜7＞：3d图像翻转效果

最新推荐文章于 2025-03-24 10:20:38 发布

编程学渣ズ

最新推荐文章于 2025-03-24 10:20:38 发布

阅读量2k

点赞数

分类专栏： web前段进阶文章标签：前端 3d

本文链接：https://blog.csdn.net/aiwanchengxu/article/details/128191978

版权

web前段进阶专栏收录该内容

7 篇文章

订阅专栏

本文介绍了一个炫酷的3D翻转相册效果实现方法，利用HTML、CSS及JavaScript技术，通过transform变换实现魔方式的图片展示效果，并提供源码。

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

这几天又闲着无聊，自己学的东西又有一点不牢固了，需要写一个小程序来巩固一下，相信大家也时有同感吧！那么这一期就给大家带来一个炫酷的相册3d翻转效果，如果搭上炫酷的文字和动画那肯定是高端、霸气上档次的：

前面我也给大家制作过一个很常见的3d旋转相册：
(168条消息) web前端进阶:＜2＞转换的补充、动画和小案例_编程学渣ズ的博客-CSDN博客_前端动画小案例https://blog.csdn.net/aiwanchengxu/article/details/124586701

这个小案例是网上非常常见的一个小程序，就是使用一个大盒子里面放六个小盒子，通过transform来将这几个面移动变化到各个面上，因为里面放了图片，加上动画效果就可以实现这种旋转的、炫酷的魔方效果；

这一个小程序其实可以看做是之前的那个魔方放大了，我们只显示他的一个面，然后通过js代码来控制这个魔方的旋转即可，只是在之前的案例上进行了升级而已，废话不多说，我们上代码：

1、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-cube</title>
    <link rel="stylesheet" href="./iconfont/iconfont.css">
    <link rel="stylesheet" href="./css/cube.css">
    <audio src="./resource/music/爱江山更爱美人(Live) - 周华健.mp3" autoplay></audio>
</head>

<body>
    <div class="last">
        <span class="iconfont icon-medianext"></span>
    </div>
    <div class="next">
        <span class="iconfont icon-medianext"></span>
    </div>
    <div class="contain">
        
        <div>
            <span>人生短短几个秋</span>
            <img src="./resource/img/wallpaper01.jpg" alt="">
        </div>
        <div>
            <span>不醉不罢休</span>
            <img src="./resource/img/wallpapers02.png" alt="">
        </div>
        <div>
            <span>东边的美人，西边黄鹤楼</span>
            <img src="./resource/img/wallpaper03.jpg" alt="">
        </div>
        <div>
            <span>人间四月芳菲尽</span>
            <img src="./resource/img/wallpapers04.png" alt="">
        </div>
    </div>
    <script src="./js/3dcube.js"></script>
</body>

</html>

布局很简单，一个大盒子里面同样放了四个小盒子，为什么是四个？因为我们没有左右旋转，如果想要实现的小伙伴也可以自己动手尝试一下，原理是一模一样的；这里除了这四个带有照片的盒子外，还有两个盒子，last和next，他们是控制魔方旋转的按钮，我们可以直接使用固定定位定在浏览器的视口上；其实这里的文字也是定位定的；

2、重点就是这个css样式

* {
  margin: 0px;
  padding: 0px;
  box-sizing: border-box;
}
body {
  perspective: 1000px;
  overflow: hidden;
}
body .last {
  position: fixed;
  left: 50%;
  top: 10px;
  transform: translateX(-50%) rotateZ(-90deg);
  z-index: 99;
}
body .last span {
  font-size: 50px;
  color: orange;
}
body .next {
  position: fixed;
  bottom: 50px;
  left: 50%;
  z-index: 99;
  transform: translateX(-50%) rotateZ(90deg);
}
body .next span {
  font-size: 50px;
  color: orange;
}
body .contain {
  width: 100%;
  height: 800px;
  margin: 0px auto;
  transition: all 1s linear;
  transform-style: preserve-3d;
  position: relative;
  /*        &:hover{
        transform: rotateX(360deg);
       } */
}
body .contain div {
  width: 100%;
  height: 100%;
  position: absolute;
  top: 0px;
  left: 0px;
}
@keyframes font {
  from {
    text-shadow: 0 0 10px lightblue, 0 0 20px lightblue, 0 0 30px lightblue, 0 0 40px skyblue, 0 0 50px skyblue, 0 0 60px skyblue;
  }
  to {
    text-shadow: 0 0 5px lightblue, 0 0 10px lightblue, 0 0 15px lightblue, 0 0 20px skyblue, 0 0 25px skyblue, 0 0 30px skyblue;
  }
}
body .contain div span {
  font-size: 50px;
  z-index: 100;
  cursor: pointer;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  color: #cce7f8;
  animation: font 0.5s alternate infinite;
}
body .contain div:nth-child(1) {
  transform: translateZ(400px);
}
body .contain div:nth-child(2) {
  transform: translateZ(-400px);
}
body .contain div:nth-child(3) {
  transform: translateY(-400px) rotateX(90deg);
}
body .contain div:nth-child(4) {
  transform: translateY(400px) rotateX(-90deg);
}
body .contain div img {
  width: 100%;
  height: 100%;
}

有很多人会在调整盒子的位置的时候可能会晕头转向，有时候通过位移旋转变换啊总是不能将盒子移到自己想要的位置，这里我也常常会这样，我做完之后才发现，我是喜欢一次性将所有的盒子都放到脑子里想象的那个位置，看似能一次性成功，其实是犯了大忌，我们对于这种很容易搞错的地方应该一步一步来，我们可以先移动一个盒子，在将这个盒子作为参照物来移动其他的盒子，这样就不容易晕头；

那么css的样式要注意的就是如何实现这种3d效果呢？首先body需要开启透视：

 perspective: 1000px;
  overflow: hidden;

这里我给的视距是1000px，表示用户和z面的距离，z面是啥面呢？你可以将你的屏幕左上角看做是圆点，向下是y正半轴，向右是x正半轴，那么z的正半轴就是指向你的，也就是你的电脑屏幕就是z平面了；这里设置盒子的宽是1000px 高是800px，如果设置为向前向后移动500px的话，我的盒子就会出现空隙，这个高不够长，盖不住；所以可以看到这里就是设置的400px，向前向后移动400px刚刚好盒子里面就是800px，也就是盒子的高，所以这样的放置就是刚刚盖住；

那么视距的作用？

其实就是实现了近大远小的效果，如果你将视距设置得很小，那么你可能在盒子里面看盒子，设置很大就可能是在很远的地方看盒子，但能明显的看到近大远小的效果；

还有一个就是开启3d空间了：

transform-style: preserve-3d;

先要实现3d效果，这个属性千万不要放错，放错之后变换就不会出现3d的变化，可能是一个很奇怪的变化，这个属性需要放在父元素上面，而且是一个需要发生变换（旋转、平移、缩放效果）的父元素上面，子元素会跟着发生变换，所以有了这个属性就有了3d效果了，要记得使用定位来确定盒子的位置，不然的话也是会出问题的；

3、js部分

let contain = document.getElementsByClassName('contain')[0]
let last = document.getElementsByClassName('last')[0]
let next = document.getElementsByClassName('next')[0]
console.log('开始')
let num = 0
last.addEventListener('click',()=>{
    console.log('上翻页')
    num++
    contain.setAttribute('style','transform:rotateX('+(-90*num)+'deg)!important')
})
let nextnum = 0
next.addEventListener('click',()=>{
    console.log('下翻页')
    num--
    contain.setAttribute('style','transform:rotateX('+(-90*num)+'deg)!important')
})

js就是负责实现按钮点击之后切换盒子位置的效果，这里我通过类名获取到了相关的元素，然后添加监听事件，在里面添加变化属性就可以了，这里使用到了一点点小技巧，就是如何记录盒子翻转的角度，代码很少，看一眼就懂，我就不过多赘述；

那么今天的分享就到这里，喜欢的小伙伴就点个赞再走吧！