css实现3D动画效果——正方体变六边形

最新推荐文章于 2022-06-07 20:25:05 发布

呦呀

最新推荐文章于 2022-06-07 20:25:05 发布

阅读量498

点赞数

分类专栏： css样式学习笔记文章标签：动画 3d css3

本文链接：https://blog.csdn.net/weixin_52580677/article/details/122406358

版权

css样式学习笔记专栏收录该内容

5 篇文章 1 订阅

订阅专栏

正方体变六边形（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);
    }
}