Hello everyone, I have a question regarding creating a unique Tumblr theme. My goal is to make the posts rotate on the y-axis when clicked, revealing like and reblog information. Currently, I've been able to achieve this effect on hover by using code from a specific source but now I need assistance in implementing it for click events instead. I've tried some tutorials involving JavaScript and jQuery without success. Can someone kindly guide me through this process in simple terms as I'm new to these programming languages? Your help is greatly appreciated! Below is a snippet of my CSS:
#f1_container {
position: relative;
margin: 10px auto;
width: 250px;
z-index: 1;
perspective: 1000;
}
#f1_card {
width: 250px;
transform-style: preserve-3d;
transition: all 1.3s linear;
}
#f1_container:hover #f1_card {
transform: rotateY(180deg);
}
.face {
position: absolute;
backface-visibility: hidden;
}
.face.back {
position: absolute;
transform: rotateY(180deg);
background-color: {color:Text};
width: 250px;
top: 0;
height: 100%;
box-sizing: border-box;
text-align: center;
}
...and here is an excerpt of my HTML:
{block:Photo}
{block:IndexPage}
<div id="f1_container">
<div id="f1_card">
<div class="photo"><div class="front-face"><img src="{PhotoURL-250}" alt="{PhotoAlt}"> </div></div> <div class="back face center">
<div class="perm"><span class="like"style="padding-right:7px">{LikeButton color="grey" size="13"}</span> <span class="rb" style="padding-left:5px;">{ReblogButton color="grey" size="13"}</span> <span class="noteslabel" style="padding-right:5px;"><a href="{Permalink}" target="_blank">{NoteCount}</a></li></ol></div>
</div>
</div>
</div>
{/block:IndexPage}
{block:PermalinkPage} <img src="{PhotoURL-500}" alt="{PhotoAlt}"> {/block:PermalinkPage} {/block:Photo}
Just to give you a glimpse, here's a link to my site: . It might seem messy right now as it's where I test my themes in progress.