悬停时旋转在 chrome 中不起作用

Posted 2023-03-06

【中文标题】悬停时旋转在 chrome 中不起作用

【英文标题】：Rotate in hover doesn't work in chrome

【发布时间】：2014-04-18 06:24:20

【问题描述】：

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

当用户悬停一个 div 时，我制作了一个翻转动画。在 Firefox 中完美运行，但在 chrome 中无法运行。我在上一小时试图找到解决方案时迷失了方向。

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

【参考方案1】：

使用 -webkit-transform: rotateY(xdeg); 不幸的是，在没有供应商前缀的情况下，transform 中的所有内容都无法正常工作。 检查http://caniuse.com/#feat=transforms2d 以获取浏览器支持

【讨论】：

该死，该死的对。我完全忘记了-webkit。谢谢！

【参考方案2】：

把它放在你所有的css中，也许它会帮助你......

-webkit-backface-visibility:hidden;

【讨论】：

@Harolchen 的代码和您的代码不能单独使用，只能与两种更改一起使用。谢谢:)（现在不能投票）