[游戏开发] css实现3D动画效果—

开发: C++知识库 Java知识库 JavaScript Python PHP知识库人工智能区块链大数据移动开发嵌入式开发工具数据结构与算法开发测试游戏开发网络协议系统运维
教程: HTML教程 CSS教程 JavaScript教程 Go语言教程 JQuery教程 VUE教程 VUE3教程 Bootstrap教程 SQL数据库教程 C语言教程 C++教程 Java教程 Python教程 Python3教程 C#教程
数码: 电脑笔记本显卡显示器固态硬盘硬盘耳机手机 iphone vivo oppo 小米华为单反装机图拉丁

-> 游戏开发 -> css实现3D动画效果——正方体变六边形 -> 正文阅读

[游戏开发]css实现3D动画效果——正方体变六边形

正方体变六边形（html+css）

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>3D效果</title>
    <link rel="stylesheet" href="style.css">
</head>
<body>
  <div id="box">
    <ul class="minbox">
      <li>1</li>
      <li>2</li>
      <li>3</li>
      <li>4</li>
      <li>5</li>
      <li>6</li>
    </ul>
  </div>
</body>
</html>

* {
    margin: 0;
    padding: 0;
}

#box {
    position: relative;
    width: 300px;
    height: 300px;
    margin: 200px auto;
    transform-style: preserve-3d;
}

ul {
    list-style: none;
}

.minbox {
    position: absolute;
    width: 300px;
    height: 300px;
    transform-style: preserve-3d;
    animation: move1 5s infinite linear;
}

.minbox li {
    width: 300px;
    height: 300px;
    position: absolute;
    line-height: 300px;
    text-align: center;
    font-size: 44px;
}

.minbox li:nth-child(1) {
    background: #b7e0ff;
    background-size: cover;
    transform: translateZ(150px);
    transition: transform 1.5s;
}
.minbox li:nth-child(2) {
    background: #cfeadc;
    background-size: cover;
    transform: rotateY(90deg) translateZ(150px);
    transition: transform 1.5s;
}
.minbox li:nth-child(3) {
    background: #fbedca;
    background-size: cover;
    transform: rotateX(90deg) translateZ(150px);
    transition: transform 1.5s;
}
.minbox li:nth-child(4) {
    background: #fbe2ca;
    background-size: cover;
    transform: rotateX(180deg) translateZ(150px);
    transition: transform 1.5s;
}
.minbox li:nth-child(5) {
    background: #fedee1;
    background-size: cover;
    transform: rotateY(-90deg) translateZ(150px);
    transition: transform 1.5s;
}
.minbox li:nth-child(6) {
    background: #768ba0;
    background-size: cover;
    transform: rotateX(-90deg) translateZ(150px);
    transition: transform 1.5s;
}

/* 鼠标悬停效果 */
.minbox:hover {
    animation: move2 5s infinite linear;
}
.minbox:hover li:nth-child(1) {
    background: #b7e0ff;
    background-size: cover;
    transform: translateZ(400px);
    
}
.minbox:hover li:nth-child(2) {
    background: #cfeadc;
    background-size: cover;
    transform: rotateY(60deg) translateZ(400px);
}
.minbox:hover li:nth-child(3) {
    background: #fbedca;
    background-size: cover;
    transform: rotateY(120deg) translateZ(400px);
}
.minbox:hover li:nth-child(4) {
    background: #fbe2ca;
    background-size: cover;
    transform: rotateY(180deg) translateZ(400px);
}
.minbox:hover li:nth-child(5) {
    background: #fedee1;
    background-size: cover;
    transform: rotateY(-60deg) translateZ(400px);
}
.minbox:hover li:nth-child(6) {
    background: #768ba0;
    background-size: cover;
    transform: rotateY(-120deg) translateZ(400px);
}

@keyframes move1 {
    0% {
        transform: rotateX(10deg) rotateY(0deg);
    }
    100% {
        transform: rotateX(370deg) rotateY(360deg);
    }
}
@keyframes move2 {
    0% {
        transform: rotateX(10deg) rotateY(0deg);
    }
    100% {
        transform: rotateX(10deg) rotateY(360deg);
    }
}