html - 我应该更改轴或向上/向下翻转的度数吗？

Question

我希望它向上/向下翻转而不是向左/轻翻转，所以我的问题是我是否需要更改轴或 Angular ？自 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);
}

仍有一些奇怪的双重旋转发生，但由于您的示例中出现了这种情况，所以我没有尝试修复它，因为我不确定您要达到的效果。

---

编辑:

另外，如果我明白发生了什么，你就会发现那里有一个不必要的重复元素。在这里，我删除了额外的元素并修改了 CSS，通过将单个元素旋转 360 度而不是每个旋转两个 180 度来获得相同的效果。 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);
}