效果演示：
代码目录：
主要代码实现：
css样式：
/*Full-page view:https://codepen.io/GeorgePark/full/gegavO/*/@import url(/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文件在上面截图可以看到 需要引进来、图片也可以替换成自己喜欢的样子。
源码获取
精彩推荐更新中：
HTML5大作业实战100套
打卡 文章 更新36/ 100天
大家可以点赞、收藏、关注、评论我啦 、需要完整文件随时联系我或交流哟~！
