CSS3动画实现旋转魔方

最新推荐文章于 2023-05-22 19:49:17 发布

小胖仔yo

最新推荐文章于 2023-05-22 19:49:17 发布

阅读量548

点赞数 1

分类专栏：随笔文章标签： CSS3动画

本文链接：https://blog.csdn.net/qq_42204414/article/details/88765439

版权

随笔专栏收录该内容

19 篇文章 0 订阅

订阅专栏

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

<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>三阶魔方</title>
<style>
* {
padding: 0;
margin: 0;
}
.box {
width: 170px;
transform-style: preserve-3d;
animation: dh 3s linear infinite;
margin: 200px auto;
}
.box div {
position: absolute;
width: 170px;
height: 170px;
overflow: hidden;
background-color: rgb(22, 236, 208);
}
ul {
width: 190px;
height: 190px;
}
ul li {
display: inline-block;
float: left;
width: 50px;
height: 50px;
line-height: 50px;
border: 1px solid;
text-align: center;
margin-right: 7px;
margin-bottom: 7px;
background-color: pink;
}

.qian {
transform: translateZ(85px);
}

.hou {
transform: rotateY(180deg) translateZ(85px);
}

.zuo {
transform: rotateY(-90deg) translateZ(85px);
}

.you {
transform: rotateY(90deg) translateZ(85px);
}
.top {
transform: rotateX(90deg) translateZ(85px);
}
.bt {
transform: rotateX(-90deg) translateZ(85px);
}
@keyframes dh {
from {
transform: rotateY(0deg) rotateX(0deg) rotateZ(0deg);
}

to {
transform: rotateX(360deg) rotateY(360deg) rotateZ(360deg);
}
}
.box:hover {
animation-play-state: paused;
}
</style>
</head>