giphy – VLOZY

<style>
.container {
position: relative;
width: 400px; /* Ajustez la taille du conteneur selon vos préférences */
height: 400px; /* Ajustez la taille du conteneur selon vos préférences */
margin: 0 auto;
}
.surrounding-images {
position: absolute;
width: 100%;
height: 100%;
transform: rotate(0deg);
}
.surrounding-images img {
width: 80px; /* Ajustez la taille des images environnantes selon vos préférences */
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
}
.surrounding-images img:nth-child(1) { /* 12 heures */
transform: rotate(45deg) translateX(180px);
}
.surrounding-images img:nth-child(2) { /* 1 heure */
transform: rotate(90deg) translateX(180px);
}
.surrounding-images img:nth-child(3) { /* 2 heures */
transform: rotate(135deg) translateX(180px);
}
.surrounding-images img:nth-child(4) { /* 3 heures */
transform: rotate(180deg) translateX(180px);
}
.surrounding-images img:nth-child(5) { /* 6 heures */
transform: rotate(225deg) translateX(180px);
}
.surrounding-images img:nth-child(6) { /* 9 heures */
transform: rotate(270deg) translateX(180px);
}
.surrounding-images img:nth-child(7) { /* 10 heures */
transform: rotate(315deg) translateX(180px);
}
.surrounding-images img:nth-child(8) { /* 11 heures */
transform: rotate(360deg) translateX(180px);
}
</style>

<body>
<div class="container">
<div class="surrounding-images">
<img src="C:\Users\Soufiane.MOUMID\Desktop\COD\CAMERA\cloud.png">
<img src="C:\Users\Soufiane.MOUMID\Desktop\COD\CAMERA\audio.png">
<img src="C:\Users\Soufiane.MOUMID\Desktop\COD\CAMERA\light.png">
<img src="C:\Users\Soufiane.MOUMID\Desktop\COD\CAMERA\fhd.png">
<img src="C:\Users\Soufiane.MOUMID\Desktop\COD\CAMERA\message.png">
<img src="C:\Users\Soufiane.MOUMID\Desktop\COD\CAMERA\sd.png">
<img src="C:\Users\Soufiane.MOUMID\Desktop\COD\CAMERA\control.png">
<img src="C:\Users\Soufiane.MOUMID\Desktop\COD\CAMERA\alert.png">
</div>
</div>