0
Ich versuche eine Galerieseite zu kodieren, die neun Bilder in einem drei-mal-drei Raster enthält. Wenn jemand auf ein Bild klickt, möchte ich, dass das Bild auf der Y-Achse gedreht wird und weißer Text auf schwarzem Hintergrund angezeigt wird. Das Problem ist, dass ich nicht weiß, wie man das Bild dreht. Ich denke, es hat etwas mit CSS zu tun?Text auf der Rückseite des sich drehenden Bildes
html:
<div id="gallery" class="gallery-section section-container type3">
<div class="container">
<div class="indent-10">
<div class="row">
<div class="col-md-4">
<div class="img-wrapper">
<img src="img/gallery-img-1.jpg" alt="gallery-img-1"/>
</div>
<div class="text-wrapper">
<div class="header-wrapper">
<h3>
Rushed Flats
</h3>
</div>
<div class="para-wrapper">
<p>
architecto beatae vitae dicta sunt explicabo. Nam libero tempore, cum soluta nobis est
eligendi optio cumque nihil impedit quo minus id quod maxime placeat.
</p>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
Css:
.gallery-section{
.indent-10{
max-width: 85%;
margin: 0 auto;
}
.img-wrapper{
margin-bottom: 2px;
img{
}
}
.text-wrapper{
.header-wrapper{
h3{
}
}
.para-wrapper{
p{
}
}
}
}
https://davidwalsh.name/demo/css-flip.php – Pete
Die Frage enthält kein bestimmtes Problem, das behoben werden muss, daher ist es zu breit. Sie haben weder die JavaScript- noch die CSS-Seite implementiert. – Esko
das Problem ist, dass ich nicht weiß, wie man das Bild dreht, scheint nichts zu arbeiten –