相关知识点见:CSS变形(2)
HTML部分:
<div>
<span class="item"></span>
<span class="item"></span>
<span class="item"></span>
<span class="item"></span>
<span class="item"></span>
</div>
CSS部分:
body {
height: 100vh;
display: flex;
justify-content: center;
align-items: center;
}
div {
width: 700px;
display: flex;
flex-wrap: wrap;
justify-content: center;
transform-style: preserve-3d;
}
.item {
display: block;
margin: 10px;
width: 200px;
height: 200px;
box-sizing: border-box;
border: 20px solid rgb(39, 100, 145);
border-radius: 50%;
}
.item:nth-child(2) {
border-color: rgb(1, 1, 1);
transform: rotateY(-2deg);
}
.item:nth-child(3) {
border-color: red;
transform: rotateY(-2deg);
}
.item:nth-child(4) {
border-color: rgb(239, 216, 42);
transform: translateY(-130px) rotateX(1deg) rotateY(1deg);
}
.item:nth-child(5) {
border-color: green;
transform: translateY(-130px) rotateX(1deg) rotateY(1deg);
}
实际效果图: