html - 智能手机的CSS3转换不起作用

当光标悬停在块上时，我使用css3方法transform: rotateY(-180deg);来显示内容。



当我用智能手机单击图块时，没有任何附加内容，如何显示内容？

我的课 ：

#effect-2 figure .img-hover {
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    padding: 0 10px;
    text-align: center;
    background-color: #e74c3c;
    -webkit-backface-visibility: hidden;
    -moz-backface-visibility: hidden;
    -ms-backface-visibility: hidden;
    backface-visibility: hidden;
    -webkit-transform: rotateY(-180deg);
    -moz-transform: rotateY(-180deg);
    -ms-transform: rotateY(-180deg);
    -o-transform: rotateY(-180deg);
    transform: rotateY(-180deg);
    -webkit-transition: all 0.5s;
    -moz-transition: all 0.5s;
    -ms-transition: all 0.5s;
    -o-transition: all 0.5s;
    transition: all 0.5s;
}

HTML块：

<li>
    <figure>
        <img src="img/cocacola.png" class="front">
        <div class="img-hover">
            <h4>Cocacola</h4>
        </div>
    </figure>
</li>

最佳答案

您可以使用javascript为触摸设备添加触摸事件，以添加您的课程（并触发动画），即：

var myElement = //get your element

myElement.addEventListener('touchstart', function(e){
    this.className = "hover";
    setTimeout(function(){
        myElement.className = "";
    }, [animation duration]);
});

您可以将上面的animation duration设置为与CSS效果的时间相匹配（假设它们不循环），以便可以重复使用它。如果它确实循环了，那么您不必担心它。

如果您希望只要触摸处于活动状态就可以工作，则可以触发在touchend上删除该类。

关于html - 智能手机的CSS3转换不起作用，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/28670703/