一个简单的CSS 正方体制作

最新推荐文章于 2024-07-06 13:17:42 发布

一叶竹

最新推荐文章于 2024-07-06 13:17:42 发布

阅读量8.7k

点赞数 2

分类专栏： 2017年

本文链接：https://blog.csdn.net/wybqq/article/details/56016640

版权

2017年专栏收录该内容

16 篇文章 0 订阅

订阅专栏

test.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <link rel="stylesheet" href="css/test.css">
</head>
<body>
   <p >kaekeaeaaaaaaaaaaaaaaaaaaaeeeeeee</p>
   <div>css 动画</div>
   <div class="contain">
       <div class="box">
           <div class="face one"> </div>
           <div class="face two"> </div>
           <div class="face three"> </div>
           <div class="face four"> </div>
           <div class="face five"> </div>
           <div class="face six"> </div>
       </div>
   </div>
</body>
</html>

test.css

@keyframes rotate {
    100% {
        transform: rotateY(360deg) rotateX(360deg);
    }
}
.contain {
    position: relative;
    perspective: 1600px;
    animation: rotate-frame 30s linear infinite;

}
.box {
    animation: rotate 20s ease 0s normal none infinite running ;

    height: 240px;
    margin: 0 auto;
    position: relative;
    transform-style: preserve-3d;
    width: 240px;


}

.face {
    backface-visibility: hidden;
    background-color: #fae48c;
    height: 240px;
    opacity: 0.6;
    position: absolute;
    width: 240px;

}
.box .one {

    background-color: #fae48c;
    transform: rotateX(90deg) translateZ(120px);

}
.box .two {
    background-color:#9900CC ;
    transform: translateZ(120px);
}
.box .three {

    transform: rotateY(90deg) translateZ(120px);
    background-color: yellow;
}
.box .four {
    transform: rotateY(180deg) translateZ(120px);
    background-color: green;
}
.box .five {

    transform: rotateY(-90deg) translateZ(120px);
    background-color: greenyellow;
}
.box .six {
    transform: rotateX(-90deg) translateZ(120px) rotate(180deg);
    background-color: black;
}