Question

这是我的第一个问题，所以请放轻松我。我正在尝试制作一个Tumblr主题，其中帖子在y轴上旋转，以便在您单击它们时显示相似内容和reblog信息。我设法做到这一点，以便在使用here的代码悬停时发生这种情况，但正如我所提到的，我想让它在点击时发生。我已经看过几个关于如何使用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}

修改：以下是该页面的链接：http://shimmeringdaydreams.tumblr.com。（对不起，它现在变得一团糟;这就是我测试我正在制作的主题的地方，而我正在制作这个主题。）

Answer 1

我认为拉姆齐正处于正确的轨道：焦点。尝试将f1_container包装在这样的锚中：

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

然后删除HTML Anchor, Disable Style中的特殊锚样式：

.focus-wrapper:hover, .focus-wrapper:visited {
   text-decoration: inherit;
   color: inherit;
   cursor: auto;
}

然后制定规则以改变焦点：

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

删除浏览器的焦点大纲：

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

此外，如果不清楚，您取出看似如下的规则：

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

丑陋的例子：http://jsfiddle.net/yb9exv9b/

Answer 2

如果我没弄错的话，我很确定Tumblr允许jQuery和Javascript集成。在你的文件的头部，把它：

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

这将允许您使用jQuery。现在，您所要做的就是编写点击功能：

var r=0;
$(document).ready(function() {
    $('#Image-ID-or-DIV').click(function(){   
        $("#Image-ID-or-DIV").css("transition", "500ms linear all");                    
        $("#imgs").css({transform: 'rotateY(' + (r += 180) + 'deg)'});
    });
});

0）r = 0将在动画完成后重置动画。

1）Document.ready是一个基本的jQuery函数，没什么特别的

2）这表明当单击Image（必须有ID）时，将执行一个函数。

3）这表示单击图像时，它将具有500毫秒的转换（可根据您的喜好进行更改）并且将顺利进行。

4）图像的实际旋转发生在这里。阅读一些关于此问题的 documentation 。基本上，这表示点击后，图像css将改变，以便它将旋转r + 180度（r为0，但它会重置动画，因此这是至关重要的。）

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

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

但您可能希望查看一些documentation,，因为不同的规则适用于jQuery .css（）。

我希望这对你有所帮助！

旋转点击显示信息

2 个答案: