css-dice effect
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<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));
}
body{
background-color: #000;
}
.container{
margin: 100px auto;
width: var(--allW);
height: var(--allW);
/* border: 1px solid red; */
/* 保留3d效果 */
transform-style: preserve-3d;
/* 三维透视效果 */
perspective: 900px;
}
.container-box{
position: relative;
width: 100%;
height: 100%;
transform-style: preserve-3d;
/* 添加transform旋转 */
/* transform: rotate(45deg) rotateY(45deg) rotateZ(45deg); */
/* 添加旋转动画 */
animation: rotate 5s infinite al