绕其对角线旋转一个立方体

Question

我有一个旋转它的立方体，因此看起来像是对角线。 我如何围绕这个特定的对角线旋转这个立方体？ 我尝试了不同的轮换，但似乎不适合我。 我正在寻找仅CSS解决方案/说明。

 .container { width: 200px; height: 200px; position: absolute; perspective: 10000px; left: 50vw; top: 50vh; transform: translateX(-50%) translateY(-50%); } .cube { width: 100%; height: 100%; position: absolute; transform-style: preserve-3d; } .cube figure { margin: 0; width: 100%; height: 100%; display: block; position: absolute; border: 2px solid black; box-sizing: border-box; } .cube .front { transform: rotateY(0deg) translateZ(100px); } .cube .back { transform: rotateX(180deg) translateZ(100px); } .cube .right { transform: rotateY(90deg) translateZ(100px); } .cube .left { transform: rotateY(-90deg) translateZ(100px); } .cube .top { transform: rotateX(90deg) translateZ(100px); } .cube .bottom { transform: rotateX(-90deg) translateZ(100px); } .cube { transform: rotateY(35deg) rotateX(45deg); } .cube:hover { transition: all 1s; transform: rotateY(35deg) rotateX(45deg); } 

 <section class="container"> <div class="cube"> <figure class="front"></figure> <figure class="back"></figure> <figure class="right"></figure> <figure class="left"></figure> <figure class="top"></figure> <figure class="bottom"></figure> </div> </section> 

Answer 1

找到了-这解决了我的问题（将鼠标悬停在多维数据集上）。

说明：转换堆栈是从右到左求值的。 因此，如果要旋转围绕z轴变换的元素，则需要将变换设置为第一个。

如果原件是

transform: translateX(-50%) translateY(-50%);

然后

transform: rotateZ(value) translateX(-50%) translateY(-50%);

将围绕观察者的z轴旋转元素（所需效果）

transform: translateX(-50%) translateY(-50%) rotateZ(value);

将围绕其Z轴旋转元素

 .container { width: 200px; height: 200px; position: absolute; perspective: 10000px; left: 50vw; top: 50vh; transform: translateX(-50%) translateY(-50%); } .cube { width: 100%; height: 100%; position: absolute; transform-style: preserve-3d; } .cube figure { margin: 0; width: 100%; height: 100%; display: block; position: absolute; border: 2px solid black; box-sizing: border-box; } .cube .front { transform: rotateY( 0deg ) translateZ( 100px ); } .cube .back { transform: rotateX( 180deg ) translateZ( 100px ); } .cube .right { transform: rotateY( 90deg ) translateZ( 100px ); } .cube .left { transform: rotateY( -90deg ) translateZ( 100px ); } .cube .top { transform: rotateX( 90deg ) translateZ( 100px ); } .cube .bottom { transform: rotateX( -90deg ) translateZ( 100px ); } .cube { transform: rotateY(35deg) rotateX(45deg); } .cube:hover { transition: all 1s; transform:rotateZ(60deg) rotateY(35deg) rotateX(45deg); } 

 <section class="container"> <div class="cube"> <figure class="front"></figure> <figure class="back"></figure> <figure class="right"></figure> <figure class="left"></figure> <figure class="top"></figure> <figure class="bottom"></figure> </div> </section>