我正在学习创建立方体旋转效果。悬停时，如果我将rotateX替换为rotateY，则多维数据集围绕以Y轴为中心旋转。但是，当存在rotateX时，多维数据集不会围绕以X轴为中心的方向旋转。如何实现立方体的适当旋转？
#container {
perspective: 1000px;
perspective-origin: 0 0;
}
#cube {
position: relative;
top: 100px;
left: 100px;
width: 200px;
transform-style: preserve-3d;
transition: transform 2s;
transform-origin: 50% 50%;
}
#cube div {
position: absolute;
width: 200px;
height: 200px;
}
#front {
transform: rotateY( 0deg ) translateZ( 100px );
background-color: rgba(0,34,62,0.3);
}
#right {
transform: rotateY( 90deg ) translateZ( 100px );
background-color: rgba(110,34,162,0.3);
}
#back {
transform: rotateY( 180deg ) translateZ( 100px );
background-color: rgba(20,4,62,0.3);
}
#left {
transform: rotateY( -90deg ) translateZ( 100px );
background-color: rgba(80,134,2,0.3);
}
#top {
transform: rotateX(90deg) translateZ(100px);
}
#bottom {
transform: rotateX(-90deg) translateZ(100px);
}
#cube:hover {
transform: rotateX(360deg);
}<html>
<body>
<div id="container">
<div id="cube">
<div id="front">
<h1>1</h1>
</div>
<div id="right">
<h1>2</h1>
</div>
<div id="back">
<h1>3</h1>
</div>
<div id="left">
<h1>4</h1>
</div>
<div id="top">
<h1>5</h1>
</div>
<div id="bottom">
<h1>6</h1>
</div>
</div>
</div>
</body>
</html>最佳答案
如果我对您的理解正确，则只需将#cube的高度设置为200px
#container {
perspective: 1000px;
perspective-origin: 0 0;
}
#cube {
position: relative;
top: 100px;
left: 100px;
width: 200px;
height:200px;
transform-style: preserve-3d;
transition: transform 2s;
transform-origin: 50% 50%;
}
#cube div {
position: absolute;
width: 200px;
height: 200px;
}
#front {
transform: rotateY( 0deg ) translateZ( 100px );
background-color: rgba(0,34,62,0.3);
}
#right {
transform: rotateY( 90deg ) translateZ( 100px );
background-color: rgba(110,34,162,0.3);
}
#back {
transform: rotateY( 180deg ) translateZ( 100px );
background-color: rgba(20,4,62,0.3);
}
#left {
transform: rotateY( -90deg ) translateZ( 100px );
background-color: rgba(80,134,2,0.3);
}
#top {
transform: rotateX(90deg) translateZ(100px);
}
#bottom {
transform: rotateX(-90deg) translateZ(100px);
}
#cube:hover {
transform: rotateX(360deg);
}<html>
<body>
<div id="container">
<div id="cube">
<div id="front">
<h1>1</h1>
</div>
<div id="right">
<h1>2</h1>
</div>
<div id="back">
<h1>3</h1>
</div>
<div id="left">
<h1>4</h1>
</div>
<div id="top">
<h1>5</h1>
</div>
<div id="bottom">
<h1>6</h1>
</div>
</div>
</div>
</body>
</html>关于html - CSS多维数据集中的RotateX无法正常工作，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/37541741/