3D实现魔方效果

最新推荐文章于 2021-05-26 07:06:44 发布

Grocery store owner

最新推荐文章于 2021-05-26 07:06:44 发布

阅读量184

点赞数 2

分类专栏：魔方

本文链接：https://blog.csdn.net/no_one_but_you/article/details/109105143

版权

HTML CSS 3D效果动画 transform

关键词由CSDN通过智能技术生成

魔方专栏收录该内容

1 篇文章 0 订阅

订阅专栏

html和css实现3D魔方效果
效果图
在这里插入图片描述

css样式
* {
    margin: 0;
    padding: 0;
}
.side {
    position: relative;
    width: 300px;
    height: 300px;
    margin: 150px auto;
    transform-style: preserve-3d;
    transform: rotateX(-20deg) rotateY(20deg);
    animation: move 5s linear infinite;
}
@keyframes move {
    0% {
        transform: rotateX(-20deg) rotateY(20deg);
    }
    100% {
        transform: rotateX(-360deg) rotateY(360deg);
    }
}
.side > div {
    width: 100%;
    height: 100%;
    position: absolute;
}
.front {
    background-color: red;
    transform: translateZ(150px);
}
.back {
    background-color: black;
    transform: translateZ(-150px);
}
.top {
    background-color: purple;
    transform: translateY(-150px) rotateX(90deg);
}
.bottom {
    background-color: skyblue;
    transform: translateY(150px) rotateX(90deg);
}
.left {
    background-color: slateblue;
    transform: translateX(-150px) rotateY(90deg);
}
.right {
    background-color: slategrey;
    transform: translateX(150px) rotateY(-90deg);
}

html结构
<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <link rel="stylesheet" href="css/mofang.css">
</head>

<body>
    <div class="side">
        <!-- 上 -->
        <div class="top"></div>
        <!-- 下 -->
        <div class="bottom"></div>
        <!-- 左 -->
        <div class="left"></div>
        <!-- → -->
        <div class="right"></div>
        <!-- 前 -->
        <div class="front"></div>
        <!-- 后 -->
        <div class="back"></div>
    </div>
</body>

</html>

Grocery store owner

关注

2
点赞
踩
0

收藏

觉得还不错? 一键收藏
2
评论
3D实现魔方效果

html和css实现3D魔方效果效果图css样式* { margin: 0; padding: 0;}.side { position: relative; width: 300px; height: 300px; margin: 150px auto; transform-style: preserve-3d; transform: rotateX(-20deg) rotateY(20deg); animation: mo
复制链接

扫一扫

专栏目录