HTML+CSS+JS实现 ❤️ 立方体旋转图片切换特效❤️https://codepen.@import url(ht

效果演示：

代码目录：

主要代码实现：

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文件在上面截图可以看到需要引进来、图片也可以替换成自己喜欢的样子。

源码获取

精彩推荐更新中：

HTML5大作业实战100套

打卡文章更新 36 ****/ 100天

大家可以点赞、收藏、关注、评论我啦、需要完整文件随时联系我或交流哟~！

在这里插入图片描述