Question

我希望它可以向上/向下翻转而不是左/轻，所以我的问题是我需要更改轴还是角度？我正在努力，因为2小时似乎没有什么可以得到那项工作。请指导我完成这个。这是fiddle。

HTML

<div class="flip" style="width: X.px; height: X.px;">
    <a href="#">
        <div class="flip-front">
            <img src="http://divabetic.files.wordpress.com/2012/07/dai-mcdonalds-400-calories280.jpg">
        </div>
           <div class="flip-back">
            <img src="http://divabetic.files.wordpress.com/2012/07/dai-mcdonalds-400-calories280.jpg">
        </div>
    </a>
</div>

CSS

.flip {
    position: relative;
    -webkit-perspective: 1000;
    -moz-perspective: 1000;
    -ms-perspective: 1000;
    -o-perspective: 1000;
    perspective: 1000;
}
.flip .flip-front, .flip .flip-back {
    position: absolute;
    top: 0;
    left: 0;
    -webkit-transform-style: preserve-3d;
    -moz-transform-style: preserve-3d;
    -ms-transform-style: preserve-3d;
    -o-transform-style: preserve-3d;
    transform-style: preserve-3d;
    -webkit-backface-visibility: hidden;
    -moz-backface-visibility: hidden;
    -ms-backface-visibility: hidden;
    -o-backface-visibility: hidden;
    backface-visibility: hidden;
    -webkit-transition: 0.75s;
    -moz-transition: 0.75s;
    -o-transition: 0.75s;
    transition: 0.75s;
}
.flip .flip-front {
    z-index: 5;
}
.flip .flip-back {
    z-index: 0;
    -webkit-transform: rotateY(-180deg);
    -moz-transform: rotateY(-180deg);
    -ms-transform: rotateY(-180deg);
    -o-transform: rotateY(-180deg);
    transform: rotateY(-180deg);

}
.flip:hover .flip-front {
    z-index: 5;
    -webkit-transform: rotateY(270deg);
    -moz-transform: rotateY(270deg);
    -ms-transform: rotateY(270deg);
    -o-transform: rotateY(270deg);
    transform: rotateY(270deg);
}
.flip:hover .flip-back {
    z-index: 5;
    -webkit-transform: rotateX(0deg);
    -moz-transform: rotateX(0deg);
    -ms-transform: rotateX(0deg);
    -o-transform: rotateX(0deg);
    transform: rotateX(0deg);
}

Answer 1

您希望在您的情况下将旋转轴更改为X轴。基本上，使用rotateX()而不是rotateY()所以这里是更新的fiddle和CSS：

.flip {
    position: relative;
    -webkit-perspective: 1000;
    -moz-perspective: 1000;
    -ms-perspective: 1000;
    -o-perspective: 1000;
    perspective: 1000;
}
.flip .flip-front, .flip .flip-back {
    position: absolute;
    top: 0;
    left: 0;
    -webkit-transform-style: preserve-3d;
    -moz-transform-style: preserve-3d;
    -ms-transform-style: preserve-3d;
    -o-transform-style: preserve-3d;
    transform-style: preserve-3d;
    -webkit-backface-visibility: hidden;
    -moz-backface-visibility: hidden;
    -ms-backface-visibility: hidden;
    -o-backface-visibility: hidden;
    backface-visibility: hidden;
    -webkit-transition: 0.75s;
    -moz-transition: 0.75s;
    -o-transition: 0.75s;
    transition: 0.75s;
}
.flip .flip-front {
    z-index: 5;
}
.flip .flip-back {
    z-index: 0;
    -webkit-transform: rotateX(-180deg);
    -moz-transform: rotateX(-180deg);
    -ms-transform: rotateX(-180deg);
    -o-transform: rotateX(-180deg);
    transform: rotateX(-180deg);

}
.flip:hover .flip-front {
    z-index: 5;
    -webkit-transform: rotateX(270deg);
    -moz-transform: rotateX(270deg);
    -ms-transform: rotateX(270deg);
    -o-transform: rotateX(270deg);
    transform: rotateX(270deg);
}
.flip:hover .flip-back {
    z-index: 5;
    -webkit-transform: rotateX(0deg);
    -moz-transform: rotateX(0deg);
    -ms-transform: rotateX(0deg);
    -o-transform: rotateX(0deg);
    transform: rotateX(0deg);
}

还有一些奇怪的双旋转发生，但由于你的例子中存在，我没有尝试修复它，因为我不确定你到底会有什么影响。

修改

另外，如果我了解发生了什么，那么你就有了一个不必要的重复元素。在这里，我删除了额外的元素并通过将单个元素旋转360度而不是两个180度来修改CSS以获得相同的效果。 Fiddle。我还修改了代码以将绝对宽度和高度应用于.flip div，这样就不会在Firefox中进行双重旋转，因为当元素旋转时div会折叠。

<强> HTML：

<div class="flip"> <a href="#"> <div class="flip-front"> <img src="http://divabetic.files.wordpress.com/2012/07/dai-mcdonalds-400-calories280.jpg"> </div> </a> </div>

<强> CSS：

.flip { position: relative; -webkit-perspective: 1000; -moz-perspective: 1000; -ms-perspective: 1000; -o-perspective: 1000; perspective: 1000; height: 186px; width: 280px; } .flip .flip-front { position: absolute; top: 0; left: 0; -webkit-transform-style: preserve-3d; -moz-transform-style: preserve-3d; -ms-transform-style: preserve-3d; -o-transform-style: preserve-3d; transform-style: preserve-3d; -webkit-backface-visibility: hidden; -moz-backface-visibility: hidden; -ms-backface-visibility: hidden; -o-backface-visibility: hidden; backface-visibility: hidden; -webkit-transition: 0.75s; -moz-transition: 0.75s; -o-transition: 0.75s; transition: 0.75s; } .flip .flip-front { z-index: 5; } .flip:hover .flip-front { z-index: 5; -webkit-transform: rotateX(360deg); -moz-transform: rotateX(360deg); -ms-transform: rotateX(360deg); -o-transform: rotateX(360deg); transform: rotateX(360deg); }

Answer 2

你提到翻转：悬停两次，这将覆盖前一个＆amp;没有必要使用你使用filp-back＆amp;面前。在旋转部分使用rotateX（360deg）。这将为您提供您想要的完美解决方案。＆GT;
jsfiddle链接
jsfiddle

Answer 3

正如George Yates所说，你必须将变换改为rotateX。

因为你说你想在后面有一个不同的图像，这是你的CSS：

.flip {
    position: relative;
    -webkit-perspective: 1000;
    -moz-perspective: 1000;
    -ms-perspective: 1000;
    -o-perspective: 1000;
    perspective: 1000;
    -webkit-perspective-origin-x: 140px;
    -moz-perspective-origin-x: 140px;
    -ms-perspective-origin-x: 140px;
    perspective-origin-x: 140px;
}
.flip .flip-front, .flip .flip-back {
    position: absolute;
    top: 0;
    left: 0;
    -webkit-transform-style: preserve-3d;
    -moz-transform-style: preserve-3d;
    -ms-transform-style: preserve-3d;
    -o-transform-style: preserve-3d;
    transform-style: preserve-3d;
    -webkit-backface-visibility: hidden;
    -moz-backface-visibility: hidden;
    -ms-backface-visibility: hidden;
    -o-backface-visibility: hidden;
    backface-visibility: hidden;
    -webkit-transition: 0.75s;
    -moz-transition: 0.75s;
    -o-transition: 0.75s;
    transition: 0.75s;
}
.flip .flip-front {
    z-index: 5;
}
.flip .flip-back {
    z-index: 0;
    -webkit-transform: rotateX(-180deg);
    -moz-transform: rotateX(-180deg);
    -ms-transform: rotateX(-180deg);
    -o-transform: rotateX(-180deg);
    transform: rotateX(-180deg);

}
.flip:hover .flip-front {
    z-index: 5;
    -webkit-transform: rotateX(180deg);
    -moz-transform: rotateX(180deg);
    -ms-transform: rotateX(180deg);
    -o-transform: rotateX(180deg);
    transform: rotateX(180deg);
}
.flip:hover .flip-back {
    z-index: 5;
    -webkit-transform: rotateX(0deg);
    -moz-transform: rotateX(0deg);
    -ms-transform: rotateX(0deg);
    -o-transform: rotateX(0deg);
    transform: rotateX(0deg);
}

我还在翻转类中添加了一个透视原点，使您的视角居中。你看到左边的旋转是一个透视效果，你正在寻找一个居中的旋转，但你的观点是在翻转类中居中，它比图像大。

因此，您的观点是向右，并使旋转向左看。将透视原点x设置为140px使其位于图像的中心

updated demo

我应该改变轴或向上/向下翻转的程度吗？

3 个答案: