1
我想旋轉立方體作爲一個懸停在紅色的div上。我無法找到實現這一點的CSS組合器。我想旋轉#cube，我需要使用相鄰兄弟選擇器（+），但它不工作。用於旋轉3D立方體的正確的CSS組合器
#container {
\t position: relative;
\t top: 100px;
\t left: 100px;
\t perspective: 1000px;
\t perspective-origin: 100px 100px;
}
#cube {
\t position: absolute;
\t width: 200px;
\t height: 200px;
\t transform-style: preserve-3d;
\t transition: transform 2s;
\t transform-origin: 50% 50%;
}
#cube div {
\t border: 2px solid black;
\t position: absolute;
\t border-radius: 50px;
\t width: 200px;
\t height: 200px;
}
#front {
\t transform: rotateY( 0deg) translateZ(100px);
\t background-color: rgba(0,34,62,0.3);
}
#right {
\t transform: rotateY( 90deg) translateZ(100px);
background-color: rgba(110,34,162,0.3);
}
#back {
\t transform: rotateY(180deg) translateZ(100px);
\t background-color: rgba(20,4,62,0.3);
}
#left {
\t transform: rotateY(-90deg) translateZ(100px);
\t background-color: rgba(80,134,2,0.3);
}
#top {
\t transform: rotateX(90deg) translateZ(100px);
\t background-color: rgba(80,234,200,0.3);
}
#bottom {
\t transform: rotateX(-90deg) translateZ(100px);
\t background-color: rgba(180,234,2,0.3);
}
#horizontal {
\t position: absolute;
\t top: 300px;
\t height: 50px;
\t width: 100px;
\t background-color: red;
}
#horizontal:hover + #cube{
\t transform: rotateX(360deg);
}<html>
<head>
\t <link rel="stylesheet" href="style.css">
\t </head>
<body>
\t <div id="container">
\t \t <div id="cube">
\t \t <div id="front"><h1>1</h1></div>
\t \t <div id="right"><h1>2</h1></div>
\t \t <div id="back"><h1>3</h1></div>
\t \t <div id="left"><h1>4</h1></div>
\t \t <div id="top"><h1>5</h1></div>
\t \t <div id="bottom"><h1>6</h1></div>
\t \t </div>
\t \t \t <div id="horizontal"></div>
\t \t \t <div id="vertical"></div>
\t \t </div>
\t </body>
</html>
這是不可能的CSS3。我可以用JQuery來做到嗎？這是可能的那個 –
哦！.......你可以給我任何替代的CSS ......還告訴我不是#cube兄弟#horizontal？ –