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

Question

我使用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>

Answer 1

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

var myElement = //get your element

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

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

如果您希望在触摸处于活动状态时能够正常工作，则可以在touchend

上触发删除课程

Answer 2

试试这段代码：

-ms-transform: rotateY(-180deg); /* IE 9 */
-webkit-transform: rotateY(-180deg); /* Chrome, Safari, Opera */
transform:rotateY(-180deg);

Answer 3

收听给定元素的click事件并在其上切换css类。然后，您可以在该类中指定转换。

一个例子是在元素上内联编写事件监听器，如下所示：

<div onclick="this.classList.toggle('transform-class')"></div>

如果你想重构你的代码并将事件监听器绑定在一个单独的javascript文件中，那么稍后你就可以了。