HTML+CSS+JS实现 ❤️ 立方体旋转图片切换特效❤️

效果演示：

代码目录：

主要代码实现：

css样式：

/*Full-page view:https://codepen.io/GeorgePark/full/gegavO/*/@import url(https://fonts.googleapis.com/css?family=Montserrat:500);
:root {/* Base font size */font-size: 10px;/* Border color variable */--border-color: #e70;
}* {box-sizing: border-box;
}body {font-family: "Montserrat", Arial, sans-serif;font-weight: 500;line-height: 1.5;text-align: center;min-height: 100vh;padding: 4rem 2rem;color: #fafafa;background-color: #080808;
}h1 {font-size: 4rem;
}h2 {font-size: 2rem;margin-bottom: 2.5rem;
}.cube-container {position: relative;width: 30rem;height: 30rem;margin: 5rem auto 6rem;perspective: 100rem;
}.cube {position: absolute;width: 100%;height: 100%;transform-style: preserve-3d;transition: transform 1s cubic-bezier(0.32, 0.05, 0.35, 1.6);
}.cube-face-image {display: block;position: absolute;/* opacity: 0.95; *//* border: 0.2rem solid #fafafa; */box-shadow: 0 0 0.5rem #fff, 0 0 1.5rem var(--border-color), 0 0 3rem var(--border-color);
}.image-buttons {display: grid;grid-template-columns: repeat(3, auto);grid-gap: 1.5rem;justify-content: center;
}.image-buttons input {border: 0.2rem solid #fafafa;
}.image-buttons input:focus {outline: none;border: 0.2rem solid var(--border-color);
}/* Transform images to create cube */.image-1 {transform: translateZ(15rem);
}.image-2 {transform: rotateX(-180deg) translateZ(15rem);
}.image-3 {transform: rotateY(90deg) translateZ(15rem);
}.image-4 {transform: rotateY(-90deg) translateZ(15rem);
}.image-5 {transform: rotateX(90deg) translateZ(15rem);
}.image-6 {transform: rotateX(-90deg) translateZ(15rem);
}/* Transform cube to show correct image */.cube.initial-position {transform: translateZ(-15rem) translateY(-2rem) rotateX(-15deg) rotateY(18deg) rotateZ(2deg);
}.cube.show-image-1 {transform: translateZ(-15rem);
}.cube.show-image-2 {transform: translateZ(-15rem) rotateX(180deg);
}.cube.show-image-3 {transform: translateZ(-15rem) rotateY(-90deg);
}.cube.show-image-4 {transform: translateZ(-15rem) rotateY(90deg);
}.cube.show-image-5 {transform: translateZ(-15rem) rotateX(-90deg);
}.cube.show-image-6 {transform: translateZ(-15rem) rotateX(90deg);
}

html代码 :

<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><title>CSS3 3D立方体焦点图动画特效</title><link rel="stylesheet" href="css/reset.min.css"><link rel="stylesheet" href="css/style.css"></head><body><div class="cube-container"><div class="cube initial-position"><img class="cube-face-image image-1" src="images/p1300.jpg"><img class="cube-face-image image-2" src="images/p2300.jpg"><img class="cube-face-image image-3" src="images/p3300.jpg"><img class="cube-face-image image-4" src="images/p4300.jpg"><img class="cube-face-image image-5" src="images/p5300.jpg"><img class="cube-face-image image-6" src="images/p6300.jpg"></div></div><div class="image-buttons"><input type="image" class="show-image-1" src="images/p1100.jpg"></input><input type="image" class="show-image-2" src="images/p2100.jpg"></input><input type="image" class="show-image-3" src="images/p3100.jpg"></input><input type="image" class="show-image-4" src="images/p4100.jpg"></input><input type="image" class="show-image-5" src="images/p5100.jpg"></input><input type="image" class="show-image-6" src="images/p6100.jpg"></input></div><script src="js/index.js"></script></body></html>

js文件在上面截图可以看到需要引进来、图片也可以替换成自己喜欢的样子。