Çözüldü HTML olarak fotoğraf döndürme nasıl yapılır?

TBae · 15 Ocak 2024

Arkadaşlar 30 fotoğraftan oluşan HTML olacak şekilde fotoğraf döndürme nasıl yapabilirim?

35mmart · 15 Ocak 2024

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 · 16 Ocak 2024

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;
}

TBae · 16 Ocak 2024

533388 dedi:

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;
}

Videodaki gibi programı yok mudur bunun?

533388 · 16 Ocak 2024

TBae dedi:
Videodaki gibi programı yok mudur bunun?

Programı bilmiyorum ama bir kütüphane var.

Panolens.js

pchen66.github.io

TBae · 16 Ocak 2024

533388 dedi:
Programı bilmiyorum ama bir kütüphane var.

Panolens.js

pchen66.github.io

Bir deneyeyim teşekkür ederim.

533388 · 16 Ocak 2024

TBae dedi:
Bir deneyeyim teşekkür ederim.

Ne demek, zaten attığım linkte bir örnek var.

TBae · 16 Ocak 2024

Arkadaşlar program olarak web rotate 360 diye bir program var oradan da yapılabiliyormuş.

533388 · 16 Ocak 2024

TBae dedi:
Arkadaşlar program olarak web rotate 360 diye bir program var oradan da yapılabiliyormuş.

Benim attığım oldu mu?

delikarga · 16 Ocak 2024

TBae dedi:
Evet bunu ne ile yapabilirim ?

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ğı.

TBae · 17 Ocak 2024

533388 dedi:
Benim attığım oldu mu?

Tam deneyemedim siteye girip baktım biraz ama zaman sıkıntım vardı direk programı bulup yaptım ama daha sonra onu da deneyeceğim.

Çözüldü HTML olarak fotoğraf döndürme nasıl yapılır?

Ayrıntılı düzenleme

TBae

Decapat

35mmart

533388

Hectopat

TBae

Decapat

533388

Hectopat

Panolens.js

TBae

Decapat

Panolens.js

533388

Hectopat

TBae

Decapat

533388

Hectopat

delikarga

Kilopat

TBae

Decapat

Benzer konular