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

傷城~ 2022-09-10 03:11 151阅读 0赞

> ##  效果演示： ##

![20210903174736293.gif][]

> ##    代码目录： ##

![watermark_type_ZHJvaWRzYW5zZmFsbGJhY2s_shadow_50_text_Q1NETiBAamF2YeadjumYs-WLhw_size_20_color_FFFFFF_t_70_g_se_x_16][]

> ## 主要代码实现： ##

### 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套][HTML5_100] ###

>   打卡 文章 更新  **36** ** **/  100天
> 
> 大家可以**点赞、收藏、关注、评论**我啦 、需要完整文件随时联系我或交流哟~！

![在这里插入图片描述][8e6bebf6b7cd409abc03ca5fcb83f826.gif_pic_center]

[20210903174736293.gif]: /images/20220829/771bc8f2ed184ce2a671bb46dab1ef4d.png
[watermark_type_ZHJvaWRzYW5zZmFsbGJhY2s_shadow_50_text_Q1NETiBAamF2YeadjumYs-WLhw_size_20_color_FFFFFF_t_70_g_se_x_16]: /images/20220829/f49735a289f74373af167d5bbf87481d.png
[HTML5_100]: https://blog.csdn.net/weixin_39709134/category_11287267.html
[8e6bebf6b7cd409abc03ca5fcb83f826.gif_pic_center]: /images/20220829/ed19fefc37f94f339dbd74e98bfebdb8.png