Javascript 单击可旋转以显示信息

这是我的第一个问题，所以请对我放轻松。我正在尝试制作一个Tumblr主题，其中的帖子在y轴上旋转，当你点击它们时会显示like和reblog信息。我已经设法使用中的代码使其在悬停时发生，但正如我所提到的，我想使其在单击时发生。我看过一些关于如何使用Javascript或jQuery实现这一点的教程，但我无法让它们正常工作。所以，有人能用最简单的方式解释一下如何做到这一点吗？因为我对Javascript和jQuery非常陌生？ 非常感谢！ 这是我的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;

}

…下面是一些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} 

{block:Photo}
{block:IndexPage}
{LikeButton color=“grey”size=“13”}{ReblogButton color=“grey”size=“13”}
{/block:IndexPage}
{block:PermalinkPage}{/block:PermalinkPage}{/block:Photo}

---

编辑：这是指向以下页面的链接：。（很抱歉，现在有点乱，这是我测试我正在制作的主题的地方，我正在做这件事。）

< P>我认为拉姆齐在正确的轨道上：专注。尝试将f1_容器包装在锚点中，如下所示：

<a href="#" class="focus-wrapper"> <!--also stop re-using IDs - they're supposed to be unique-->
  <div class="f1_container"> 
     <!-- just pretend I copy+pasted stuff in here -->
  </div>
</a>

然后制定规则，对焦点进行更改：

.focus-wrapper:focus .f1_container .f1_card {
   transform: rotateY(180deg);
}

并删除浏览器的焦点轮廓：

.focus-wrapper:focus {
   outline:none;
}

此外，如果不清楚，您可以取出如下规则：

#f1_container:hover #f1_card {
   transform: rotateY(180deg);
}

---

丑陋的例子：

我认为拉姆齐的重点是正确的。尝试将f1_容器包装在锚点中，如下所示：

<a href="#" class="focus-wrapper"> <!--also stop re-using IDs - they're supposed to be unique-->
  <div class="f1_container"> 
     <!-- just pretend I copy+pasted stuff in here -->
  </div>
</a>

然后制定规则，对焦点进行更改：

.focus-wrapper:focus .f1_container .f1_card {
   transform: rotateY(180deg);
}

并删除浏览器的焦点轮廓：

.focus-wrapper:focus {
   outline:none;
}

此外，如果不清楚，您可以取出如下规则：

#f1_container:hover #f1_card {
   transform: rotateY(180deg);
}

---

丑陋的例子：

如果我没有弄错的话，我很确定Tumblr允许jQuery和Javascript集成。 在文件的开头，写下：

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>

0）完成后，r=0将在重置动画时发挥重要作用

1） ready是一个基本的jQuery函数，没有什么特别之处

2） 这表示单击图像（必须具有ID）时，将执行一个函数

3） 这表明，当点击图像时，它将有500毫秒长的过渡（根据您的喜好进行更改），并将顺利进行

4） 图像的实际旋转发生在这里。读一些关于这方面的文章。基本上，这表示单击后，图像css将发生更改，使其旋转r+180度（r为0，但它会重置动画，因此这是至关重要的）

如果在单击图像时需要添加更多css，只需添加：

$("#Image-ID-or-DIV").css('[css goes here]')

但是，您可能希望了解一些应用于jQuery.css（）的不同规则

---

我希望这对你有所帮助

如果我没有弄错的话，我很确定Tumblr允许jQuery和Javascript集成。 在文件的开头，写下：

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>

0）完成后，r=0将在重置动画时发挥重要作用

1） ready是一个基本的jQuery函数，没有什么特别之处

2） 这表示单击图像（必须具有ID）时，将执行一个函数

3） 这表明，当点击图像时，它将有500毫秒长的过渡（根据您的喜好进行更改），并将顺利进行

4） 图像的实际旋转发生在这里。读一些关于这方面的文章。基本上，这表示单击后，图像css将发生更改，使其旋转r+180度（r为0，但它会重置动画，因此这是至关重要的）

如果在单击图像时需要添加更多css，只需添加：

$("#Image-ID-or-DIV").css('[css goes here]')

但是，您可能希望了解一些应用于jQuery.css（）的不同规则

---

我希望这对你有所帮助

tumblr允许您在主题中包含JS？在CSS中，尝试将

#f1#u容器：悬停

更改为

#f1#u容器：焦点

。这有帮助吗？你有包括现代化吗？这是一个脚本在这里下载@RachelGallen我试过了，但我不认为这是我需要的。谢谢，不过.tumblr允许您在主题中包含JS？在CSS中，尝试将

#f1_容器：悬停

更改为

#f1_容器：焦点

。这有帮助吗？你有包括现代化吗？这是一个脚本在这里下载@RachelGallen我试过了，但我不认为这是我需要的。谢谢，谢谢你的帮助，但不幸的是这对我不起作用。当我点击帖子时，什么也没发生。你能发布一个链接到一个实时页面吗？谢谢你的帮助，但不幸的是，这对我来说不起作用。当我点击帖子时，什么都没有发生。你能发布一个链接到一个活动页面吗？在这种情况下，你要做的就是切换一个类，因为他们已经有CSS转换工作了。在这种情况下，你要做的就是切换一个类，因为他们已经有CSS转换工作了