在Chrome中旋转悬停时无法使用 [英] Rotate in hover doesn't work in chrome

问题描述

我是新来的，很抱歉，如果我被误解了。

当用户悬停一个div时，我做了一个翻转动画。在Firefox中工作完美，但不是在chrome。我在上一小时失去了找到解决方案。

HTML

  ; div class =flip-containerontouchstart =this.classList.toggle（'hover'）;> 
< div class =flipper> 
< div class =front> 
< img src =http://www.online-image-editor.com/styles/2013/images/example_image.png/> 
< / div> 
< div class =back> 
< div class =middle> 
< div class =avatar> 
< img src =http://planetearth.nerc.ac.uk/images/uploaded/custom/blue-planet-c.jpg/> 
< / div> 
< div class =cv> 
< p> Lorem ipsum dolor sit amet，consectetuer adipiscing elit，sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat。 Ut wisi enim ad minim veniam，quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequate。< / p> 
< / div> 
< / div> 
< / div> 
< / div> 
< / div> 
  

CSS

  / *整个容器，保持透视* / 
 .flip-container {
 perspective：1000; 
 transform-style：preserve-3d; 
} 
 / * UPDATED！ hover时翻转窗格* / 
 .flip-container：hover .back，.front img：hover .back {
 transform：rotateY（0deg）; 
} 
 .flip-container：hover .front {
 transform：rotateY（180deg）; 
} 
 .flip-container，.front，.back {
 width：475px; 
 height：300px; 
} 
 / *翻转速度在这里* / 
 .flipper {
 transition：0.6s; 
 transform-style：preserve-3d; 
 position：relative; 
} 
 / *在交换期间隐藏窗格* / 
 .front，.back {
 backface-visibility：hidden; 
 transition：0.6s; 
 transform-style：preserve-3d; 
 position：absolute; 
 top：0; 
 left：0; 
} 
 / * UPDATED！前面板，放置在后面* / 
 .front {
 z-index：2; 
 transform：rotateY（0deg）; 
} 
 / * back，初始隐藏窗格* / 
 .back {
 transform：rotateY（-180deg）; 
 display：table; 
} 
 / * 
一些垂直翻转更新
 * / 
 .vertical.flip-container {
 position：relative; 
} 
 .vertical .back {
 transform：rotateX（180deg）; 
} 
 .vertical.flip-container：hover .back {
 transform：rotateX（0deg）; 
} 
 .vertical.flip-container：hover .front {
 transform：rotateX（180deg）; 
} 
 .back div.middle {
 display：table-cell; 
 vertical-align：middle; 
 text-align：center; 
 padding：0px 55px; 
} 
 .back div.middle .avatar {
 display：block; 
} 
 .back div.middle .avatar img {
 border-radius：50％; 
} 
 .back div.middle .cv {
} 
 .back div.middle .cv p {
 width：90％; 
 margin-left：auto; 
 margin-right：auto; 
} 
  

JSFIDDLE

解决方案

使用-webkit-transform ：rotateY（xdeg）;
不幸的是，不是来自transform的一切都没有厂商前缀。
检查 http://caniuse.com/#feat=transforms2d 浏览器支持 p>

I am new here, so sorry if I am being misunderstood.

I made a flip animation when user hovers a div. Works perfectly in Firefox, but not in chrome. I lost last hour trying to find solution.

HTML

<div class="flip-container" ontouchstart="this.classList.toggle('hover');">
    <div class="flipper">
        <div class="front">
            <img src="http://www.online-image-editor.com/styles/2013/images/example_image.png" />
        </div>
        <div class="back">
            <div class="middle">
                <div class="avatar">
                    <img src="http://planetearth.nerc.ac.uk/images/uploaded/custom/blue-planet-c.jpg" />
                </div>
                <div class="cv">
                    <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat.</p>
                </div>
            </div>
        </div>
    </div>
</div>

CSS

/* entire container, keeps perspective */
 .flip-container {
    perspective: 1000;
    transform-style: preserve-3d;
}
/*  UPDATED! flip the pane when hovered */
 .flip-container:hover .back, .front img:hover .back {
    transform: rotateY(0deg);
}
.flip-container:hover .front {
    transform: rotateY(180deg);
}
.flip-container, .front, .back {
    width: 475px;
    height: 300px;
}
/* flip speed goes here */
 .flipper {
    transition: 0.6s;
    transform-style: preserve-3d;
    position: relative;
}
/* hide back of pane during swap */
 .front, .back {
    backface-visibility: hidden;
    transition: 0.6s;
    transform-style: preserve-3d;
    position: absolute;
    top: 0;
    left: 0;
}
/*  UPDATED! front pane, placed above back */
 .front {
    z-index: 2;
    transform: rotateY(0deg);
}
/* back, initially hidden pane */
 .back {
    transform: rotateY(-180deg);
    display: table;
}
/* 
    Some vertical flip updates 
*/
 .vertical.flip-container {
    position: relative;
}
.vertical .back {
    transform: rotateX(180deg);
}
.vertical.flip-container:hover .back {
    transform: rotateX(0deg);
}
.vertical.flip-container:hover .front {
    transform: rotateX(180deg);
}
.back div.middle {
    display: table-cell;
    vertical-align: middle;
    text-align: center;
    padding: 0px 55px;
}
.back div.middle .avatar {
    display:block;
}
.back div.middle .avatar img {
    border-radius: 50%;
}
.back div.middle .cv {
}
.back div.middle .cv p {
    width: 90%;
    margin-left: auto;
    margin-right: auto;
}

JSFIDDLE

解决方案

Use -webkit-transform: rotateY(xdeg); Unfortunately not everything from transform works without vendor prefixes. Check http://caniuse.com/#feat=transforms2d for browser support

这篇关于在Chrome中旋转悬停时无法使用的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！