前言

👏transform-style+transform实现多个小方块，速速来Get吧~
🥇文末分享源代码。记得点赞+关注+收藏！

1.实现效果

2.实现步骤

• 定义css变量：正方形长/宽为w；

:root {--w: 30px;}

• 父容器为一个圆角正方形，添加box-shadow阴影，设置transform-style: preserve-3d，让转换的子元素保留3D转换

 .container {height: 150px;width: 150px;padding: 30px;box-shadow: 0 12px 20px 6px rgb(104 112 118 / 0.2);border-radius: 15px;transform-style: preserve-3d;}

• 父元素设置box-sizing: border-box
• 在此容器内，添加9个正方形并设置transform-style: preserve-3d，长/宽为w,按照这样的布局，改写父容器的大小，正方形平均分布，父元素设置flex横向布局，超出换行

 
...// 共9个

 .container {- height: 150px;- width: 150px;- padding: 30px;- border-radius: 15px;+ height: calc(var(--w) * 5);+ width: calc(var(--w) * 5);+ padding: var(--w);+ border-radius: calc(var(--w) / 2);+ display: flex;+ flex-wrap: wrap;box-shadow: 0 12px 20px 6px rgb(104 112 118 / 0.2);transform-style: preserve-3d;}

.square {height: var(--w);width: var(--w);border: 1px solid red;background-color: rgb(207, 52, 40);position: relative;transform-style: preserve-3d;}

• 正方形添加背景色，实现效果如下

.square {+ background-color: rgb(207, 52, 40);}

• 将父容器添加rotateX旋转45deg，rotateZ旋转45deg

.container {+ transform: rotateX(45deg) rotateZ(45deg);
}

• 为square添加前后伪元素，宽/高为w，这里可以先注释其他正方形，保留一个进行调试

.square:after,
.square:before {content: "";position: absolute;height: var(--w);width: var(--w);left: 0;top: 0;}

• 调试square的前伪元素,设置transform进行Y轴方向的旋转

.square:before {background-color: rgb(56, 35, 35);transform: rotateY(-90deg);
}

• 修改该元素的transform-origin，更改一个元素变形的原点，rotate()函数的转换原点是旋转中心（即center center），调整到合适位置

.square:before {+ transform-origin: right center;}

• 调试square的后伪元素,设置transform进行X轴方向的旋转

.square:after {background-color: rgb(80, 39, 36);transform: rotateX(0deg);}

• 修改该元素的transform-origin，调整到合适位置

.square:after {+transform-origin: right bottom;
}

• 九个正方体实现的效果如下

• 将square在z轴方向进行偏移，偏移量为w

.square {+ transform: translateZ(var(--w));
}

• square添加hover效果

.square:hover {cursor: pointer;filter: brightness(2.1);}

• square添加box-shadow底部阴影，调整为合适位置

.square {+ box-shadow: calc(var(--w) * 3) calc(var(--w) * 3) 15px rgba(0, 0, 0, 0.2);}

• 为每个方块添加上下浮动动画

.square {+ animation: beating 1s infinite;
}
@keyframes beating {50% {transform: translateZ(calc(var(--w) / 2));}
}

• 在每个square 上添加css变量，定义动画延时时间，去掉辅助线，就实现好了哇~

..// 依次

.square {- border: 1px solid red;+ animation-delay: calc(0.05s * var(--d));
}

3.实现代码

4.写在最后🍒

看完本文如果觉得对你有一丢丢帮助，记得点赞+关注+收藏鸭 🍕

更多相关内容，关注🍥苏苏的bug，🍡苏苏的github，🍪苏苏的码云~