平平科技工作室-小游戏-HTML-3D立方表白相册

平平科技工作室

已于 2024-02-21 09:55:35 修改

阅读量139

点赞数 5

分类专栏：平平科技工作室小游戏源码文章标签： html css

于 2024-02-21 09:29:59 首次发布

平平科技工作室专属

本文链接：https://blog.csdn.net/ppaqtt0314/article/details/136203127

版权

平平科技工作室同时被 2 个专栏收录

32 篇文章 0 订阅 ¥99.90 ¥299.90

订阅专栏

超级会员免费看

小游戏源码

19 篇文章 0 订阅 ¥99.90 ¥299.90

订阅专栏

超级会员免费看

一.设置CSS样式

二.准备图片

三.设置HTML

一.设置CSS样式

* {
    margin: 0px;
    padding: 0px;
}

html {
    overflow: hidden;
    height: 100%;
    background: linear-gradient(rgb(0, 238, 255) 0%, #000 100%);
}

.title {
    color: rgb(255, 0, 200);
    text-align: center;
    text-shadow: 0px 1px 0px #999, 0px 2px 0px #888, 0px 3px 0px #777, 0px 4px 0px #666, 0px 5px 0px #555, 0px 6px 0px #444, 0px 7px 0px #333, 0px 8px 7px #001135;
    font-size: 40px;
}

.cube {
    position: relative;
    margin: 0px auto;
    margin-top: 9%;
    margin-left: 42%;
    width: 200px;
    height: 200px;
    transform: rotateX(-30deg) rotateY(-80deg);
    transform-style: preserve-3d;
    animation: rotate 15s infinite;
}

.cube .outer-cube,
.cube .inner-cube {
    transform-style: preserve-3d;
}

/* 旋转立方体 */
@keyframes rotate {
    from {
        transform: rotateX(0deg) rotateY(0deg);
    }

    to {