当前位置：首页 > article >正文

HTML+CSS实现超酷超炫的3D立方体相册

article 2024/10/27 22:23:57

效果演示

HTML和CSS实现一个简单的3D立方体加载动画的相册。它使用了HTML来构建立方体的结构，并通过CSS来添加样式和动画效果。
在这里插入图片描述

HTML

<div class="loader3d">
    <div class="cube">
        <div class="face">
            <img src="../../static/test.jpg" alt="">
        </div>
        <div class="face">
            <img src="../../static/test.jpg" alt="">
        </div>
        <div class="face">
            <img src="../../static/test.jpg" alt="">
        </div>
        <div class="face">
            <img src="../../static/common_bot.png" alt="">
        </div>
        <div class="face">
            <img src="../../static/common_bot.png" alt="">
        </div>
        <div class="face">
            <img src="../../static/common_bot.png" alt="">
        </div>
    </div>
</div>

loader3d：这是外层容器，用于包裹整个立方体。
cube：这是立方体的主体，包含六个面（.face）。
face：每个.face代表立方体的一个面。这里一共有六个面，用自己的图片即可。

CSS

.loader3d {
    perspective: 600px;
    width: 100px;
    height: 100px;
}

.cube {
    width: 100%;
    height: 100%;
    transform-style: preserve-3d;
    animation: rotate 4s linear infinite;
}

.face {
    position: absolute;
    width: 100%;
    height: 100%;
    background: linear-gradient(45deg, #3498db, #e74c3c);
    opacity: 0.8;
    border: 0.5px solid #fff;
    border-radius: 25%;
    text-align: center;
    line-height: 100px;
}

.face img {
    width: 100%;
    height: 100%;
    border: 0.5px solid #fff;
    border-radius: 25%;
}

.face:nth-child(1) {
    transform: rotateX(90deg) translateZ(50px);
}

.face:nth-child(2) {
    transform: rotateX(-90deg) translateZ(50px);
}

.face:nth-child(3) {
    transform: translateZ(50px);
}

.face:nth-child(4) {
    transform: rotateY(90deg) translateZ(50px);
}

.face:nth-child(5) {
    transform: rotateY(-90deg) translateZ(50px);
}

.face:nth-child(6) {
    transform: rotateY(180deg) translateZ(50px);
}

@keyframes rotate {
    0% {
        transform: rotateX(0deg) rotateY(0deg);
    }

    100% {
        transform: rotateX(360deg) rotateY(360deg);
    }
}

loader3d：这是外层容器的样式，设置了透视效果（perspective），宽度和高度。
cube：这是立方体的样式，设置了宽度、高度、3D变换样式（transform-style），以及一个无限循环的旋转动画（rotate）。
face：这是立方体每个面的通用样式，设置了位置、大小、背景渐变色、透明度、边框、边框圆角和文本对齐方式。
face img：这是每个面上图片的样式，设置了图片的宽度、高度、边框和圆角。
face的nth-child()选择器：这是为每个面设置不同的3D旋转和位置。例如，.face:nth-child(1)将第一个面旋转90度并沿Z轴移动50px。
@keyframes rotate：这是一个关键帧动画，定义了立方体的旋转效果。从0%到100%，立方体的X轴和Y轴旋转角度从0度增加到360度。
立方体会无限循环地沿着X轴和Y轴旋转，这是通过@keyframes rotate定义的动画实现的。
每个面都有自己的旋转和位置，使得立方体看起来在空间中旋转。

查看全文

http://www.kler.cn/news/367852.html