Elementorda Daire Şeklinde Dönen Logo Alanı Nasıl Yapılır?

20-09-2025, 21:08:12

Merhaba Elementor kullanarak bir alanın içinde logoları daire şeklinde yerleştirip döndürmek istiyorum.
Elimde logolar hazır ve siteye yükledim ama istediğim şekilde animasyon veremedim.
Denediğim şeyler:

Basit grid dizilimi yaptım ama daire formu olmadı.
CSS ile döndürmeyi denedim fakat istediğim gibi sonuç çıkmadı.

Benim istediğim:

Logoların bir daire etrafında dizilmesi.
Dönme efektiyle sürekli animasyon şeklinde hareket etmesi.

Bu konuda yardımcı olabilecek biri var mı? Kod, eklenti ya da farklı bir yöntem önerisi olan varsa çok sevinirim 🙏

20-09-2025, 21:42:32

#2

kozanfirmam

<title>Daire İçinde Logolar</title> <style> body { display: flex; justify-content: center; align-items: center; height: 100vh; background-color: #000; margin: 0; font-family: sans-serif; color: white; } .logo-container { position: relative; width: 400px; height: 400px; } .logo-item { position: absolute; width: 100px; /* Logo boyutunu ayarlayabilirsiniz */ height: 100px; /* Logo boyutunu ayarlayabilirsiniz */ border-radius: 50%; overflow: hidden; display: flex; justify-content: center; align-items: center; transition: transform 0.3s ease; } .logo-item img { width: 100%; height: 100%; object-fit: cover; } /* Her bir logo için pozisyon belirleme */ .logo-item:nth-child(1) { transform: rotate(0deg) translate(200px) rotate(0deg); } .logo-item:nth-child(2) { transform: rotate(60deg) translate(200px) rotate(-60deg); } .logo-item:nth-child(3) { transform: rotate(120deg) translate(200px) rotate(-120deg); } .logo-item:nth-child(4) { transform: rotate(180deg) translate(200px) rotate(-180deg); } .logo-item:nth-child(5) { transform: rotate(240deg) translate(200px) rotate(-240deg); } .logo-item:nth-child(6) { transform: rotate(300deg) translate(200px) rotate(-300deg); } .logo-item:nth-child(7) { transform: rotate(360deg) translate(200px) rotate(-360deg); } </style> </head> <body> <div class="logo-container"> <div class="logo-item"><img src="rna_logo.png" alt="RNA Logo"></div> <div class="logo-item"><img src="erga_logo.png" alt="Erga Logo"></div> <div class="logo-item"><img src="ewa_logo.png" alt="EWA Logo"></div> <div class="logo-item"><img src="umut_cocuklari_logo.png" alt="Umut Çocukları Derneği Logo"></div> <div class="logo-item"><img src="tkf_logo.png" alt="TKF Logo"></div> <div class="logo-item"><img src="adc_profil_logo.png" alt="ADC Profil Logo"></div> </div> </body> </html>

20-09-2025, 21:44:57

#3

Ramazanyavuz

kozanfirmam adlı üyeden alıntı: mesajı görüntüle

<title>Daire İçinde Logolar</title> <style> body { display: flex; justify-content: center; align-items: center; height: 100vh; background-color: #000; margin: 0; font-family: sans-serif; color: white; } .logo-container { position: relative; width: 400px; height: 400px; } .logo-item { position: absolute; width: 100px; /* Logo boyutunu ayarlayabilirsiniz */ height: 100px; /* Logo boyutunu ayarlayabilirsiniz */ border-radius: 50%; overflow: hidden; display: flex; justify-content: center; align-items: center; transition: transform 0.3s ease; } .logo-item img { width: 100%; height: 100%; object-fit: cover; } /* Her bir logo için pozisyon belirleme */ .logo-item:nth-child(1) { transform: rotate(0deg) translate(200px) rotate(0deg); } .logo-item:nth-child(2) { transform: rotate(60deg) translate(200px) rotate(-60deg); } .logo-item:nth-child(3) { transform: rotate(120deg) translate(200px) rotate(-120deg); } .logo-item:nth-child(4) { transform: rotate(180deg) translate(200px) rotate(-180deg); } .logo-item:nth-child(5) { transform: rotate(240deg) translate(200px) rotate(-240deg); } .logo-item:nth-child(6) { transform: rotate(300deg) translate(200px) rotate(-300deg); } .logo-item:nth-child(7) { transform: rotate(360deg) translate(200px) rotate(-360deg); } </style> </head> <body> <div class="logo-container"> <div class="logo-item"><img src="rna_logo.png" alt="RNA Logo"></div> <div class="logo-item"><img src="erga_logo.png" alt="Erga Logo"></div> <div class="logo-item"><img src="ewa_logo.png" alt="EWA Logo"></div> <div class="logo-item"><img src="umut_cocuklari_logo.png" alt="Umut Çocukları Derneği Logo"></div> <div class="logo-item"><img src="tkf_logo.png" alt="TKF Logo"></div> <div class="logo-item"><img src="adc_profil_logo.png" alt="ADC Profil Logo"></div> </div> </body> </html>