👏transform-style+transform实现多个小方块,速速来Get吧~
🥇文末分享源代码。记得点赞+关注+收藏!
:root {--w: 30px;}
.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,🍪苏苏的码云~
相关内容