CSS3 智能手机的转换不工作

Question

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

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

我的 class :

#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

试试这个代码：

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

Answer 2

侦听给定元素的点击事件并在其上切换 css-class。然后你可以在 class.

中指定你的转换

一个示例是像这样在元素上内联编写事件侦听器：

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

然后，如果您想重构代码并在单独的 javascript 文件中绑定事件侦听器，您可以稍后进行。

Answer 3

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

var myElement = //get your element

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

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

如果您希望某些东西在触摸处于活动状态时起作用，您可以在 touchend

上触发删除 class

CSS3 智能手机的转换不工作

CSS3 transform for smartphone don't work

html

css

media-queries