翻转三角形3d css或javascript [英] Flip a triangle 3d css or javascript

问题描述

我想要一个直角三角形，比如这个

I am trying to have a right angle triangle such as this

. . . . . . .
.         .
.       .
.     .
.   .
. .
.

用3D动画翻转成为一个直角，例如这个

flip with a 3d animation to become a right angle such as this

            .
          . .
        .   .
      .     .
    .       .
  .         .
. . . . . . .

我对对角线转换的运气很少，但却只有一个三角形。我能够按照这里的指南垂直和水平地翻转它 http://davidwalsh.name/css-flip但是我无法对角翻转盒子。

I have had very little luck with diagonal transformation, yet alone one of a triangle. I was able to flip it vertically and horizontally following the guides here http://davidwalsh.name/css-flip however I cannot flip the box diagonally.

任何帮助或指示都是最受欢迎的！

Any help or direction is most appreciated!

按照要求JSFiddle ： http://jsfiddle.net/y36cdwx2/

as requested JSFiddle: http://jsfiddle.net/y36cdwx2/

推荐答案

要了解有关css3 rotate3d的更多信息，您可以访问此链接了解更多信息。
要完成您想要对角旋转框的操作，可以使用： transform：rotate3d（90，-90,0,180deg）;

To understand more about css3 rotate3d, you can visit this link to learn more about it. To accomplish what you want to do to rotate your box diagonally, you can use: transform: rotate3d(90, -90, 0, 180deg);

以下是完整的源代码如何操作： http： //jsfiddle.net/yp6j5qem/15

Here is the full source code how to do it: http://jsfiddle.net/yp6j5qem/15

希望这会有所帮助！

这篇关于翻转三角形3d css或javascript的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！