Çözüldü HTML olarak fotoğraf döndürme nasıl yapılır?
- Konuyu başlatan TBae
- Başlangıç Tarihi
- Mesaj 18
- Görüntüleme 352
Bu konu çözüldü olarak işaretlenmiştir. Çözülmediğini düşünüyorsanız konuyu rapor edebilirsiniz.
Çözüm
HTML:
<!DOCTYPE html>
<html>
<head>
<style>
@keyframes spin {
0% { transform: rotate(0deg); }
100% { transform: rotate(360deg); }
}
.rotate-image {
animation: spin 5s linear infinite; /* Dönme süresi burada belirtilir */
}
</style>
</head>
<body>
<img class="rotate-image" src="fotoğraf.jpg" alt="Dönen Fotoğraf">
</body>
</html>Bunu dener misin?
533388
Hectopat
- Katılım
- 27 Mart 2022
- Mesajlar
- 4.436
- Makaleler
- 2
- Çözümler
- 54
Elle döndürerek böyle yapabilirsin.
HTML:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Slider</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<div class="container">
<div>
<img src="images/1.jpeg" alt="">
</div>
<div>
<img src="images/2.jpeg" alt="">
</div>
<div>
<img src="images/3.jpeg" alt="">
</div>
<div>
<img src="images/4.jpeg" alt="">
</div>
<div>
<img src="images/5.jpeg" alt="">
</div>
</div>
</body>
</html>
CSS:
*
{
margin: 0;
padding: 0;
}
.container
{
display: flex;
justify-content: center;
align-items: center;
width: 100vw;
overflow: scroll;
}
.container div img
{
height: 900px;
width: 100vw;
}533388
Hectopat
- Katılım
- 27 Mart 2022
- Mesajlar
- 4.436
- Makaleler
- 2
- Çözümler
- 54
533388
Hectopat
- Katılım
- 27 Mart 2022
- Mesajlar
- 4.436
- Makaleler
- 2
- Çözümler
- 54
Ne demek, zaten attığım linkte bir örnek var.
533388
Hectopat
- Katılım
- 27 Mart 2022
- Mesajlar
- 4.436
- Makaleler
- 2
- Çözümler
- 54
Benim attığım oldu mu?
delikarga
Kilopat
- Katılım
- 30 Temmuz 2019
- Mesajlar
- 1.962
- Çözümler
- 27
Javascript scroll eventini dinleyerek yapabilirsin. Aynı zamanda resmin sağına soluna döndürmek için buton koyarsın, ona basılı tutma eventine de aynı fonksiyonu atarsın olur biter. Burda iş o 360 derece görüntülenecek şekilde gerekli adet resmin oluşturulması. Gerisi çocuk oyuncağı.
