五、用html+css达成魔方旋转特效——html5教程 前段大G > 首页 > 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>151.3d魔方</title>
</head>
<link rel="stylesheet" href="../common.css" />
<style>
:root {
--bg: #000;
--c1: #f5e7a1;
--c2: skyblue;
--c3: #fff;
--c4: #97d497;
--c5: #801a1a;
--c6: orange;
--w: 30px;
--gap: 8px;
--allW: calc(3 * var(--w) + 4 * var(--gap));
}
.container {
width: var(--allW);
height: var(--allW);
perspective: 900px;
}
.container-box {
position: relative;
width: var(--allW);
height: var(--allW);
transform-style: preserve-3d;
animation: rotate 5s infinite alternate;
}
.cube-side {
width: 100%;
height: 100%;
position: absolute;
background: var(--bg);
border-radius: 7px;
padding: var(--gap);
backface-visibility: hidden;
}
.cube-side .cube-grid {
width: var(--w);
height: var(--w);
border-radius: calc(var(--w) / 5);
color: var(--c);
background: currentColor;
box-shadow: calc(var(--w) + var(--gap)) 0 0 currentColor,
calc(var(--w) * 2 + var(--gap) * 2) 0 currentColor,
0 calc(var(--w) + var(--gap)) currentColor,
calc(var(--w) + var(--gap)) calc(var(--w) + var(--gap)) currentColor,
calc(var(--w) * 2 + var(--gap) * 2) calc(var(--w) + var(--gap)) currentColor,
0 calc(var(--w) * 2 + var(--gap) * 2) currentColor,
calc(var(--w) + var(--gap)) calc(var(--w) * 2 + var(--gap) * 2) currentColor,
calc(var(--w) * 2 + var(--gap) * 2) calc(var(--w) * 2 + var(--gap) * 2) currentColor;
}
.cube-side.side-front {
transform: translateZ(calc(var(--allW) / 2));
}
.cube-side.side-back {
transform: rotateX(-180deg) translateZ(calc(var(--allW) / 2));
}
.cube-side.side-right {
transform: rotateY(90deg) translateZ(calc(var(--allW) / 2));
}
.cube-side.side-left {
transform: rotateY(-90deg) translateZ(calc(var(--allW) / 2));
}
.cube-side.side-top {
transform: rotateX(90deg) translateZ(calc(var(--allW) / 2));
}
.cube-side.side-bottom {
transform: rotateX(-90deg) translateZ(calc(var(--allW) / 2));
}
@keyframes rotate {
0% {
transform: rotateZ(0deg) rotateX(0deg) rotateY(0deg);
}
15% {
transform: rotateZ(45deg) rotateX(45deg) rotateY(45deg);
}
30% {
transform: rotateZ(45deg) rotateX(90deg) rotateY(90deg);
}
45% {
transform: rotateZ(45deg) rotateX(135deg) rotateY(135deg);
}
60% {
transform: rotateZ(45deg) rotateX(90deg) rotateY(180deg);
}
75% {
transform: rotateZ(45deg) rotateX(45deg) rotateY(225deg);
}
100% {
transform: rotateZ(45deg) rotateX(0deg) rotateY(270deg);
}
}
</style>
<body>
<div class="container">
<div class="container-box">
<div class="cube-side side-front">
<div class="cube-grid" style="--c: var(--c1)"></div>
</div>
<div class="cube-side side-back">
<div class="cube-grid" style="--c: var(--c2)"></div>
</div>
<div class="cube-side side-right">
<div class="cube-grid" style="--c: var(--c3)"></div>
</div>
<div class="cube-side side-left">
<div class="cube-grid" style="--c: var(--c4)"></div>
</div>
<div class="cube-side side-top">
<div class="cube-grid" style="--c: var(--c5)"></div>
</div>
<div class="cube-side side-bottom">
<div class="cube-grid" style="--c: var(--c6)"></div>
</div>
</div>
</div>
</body>
</html>
这篇五、用html+css达成魔方旋转特效——html5教程，文章就结束了，有不懂的地方可以联系站长。希望每个前端人员都有可以找到一个好工作，谢谢观看，祝您生活愉快。
2023-11-21 15:00
文章点击量：
作者：【前端大G】
