1
赤いdivの上に1つのキューブを置いて回転したいと思います。私はこれを達成するためのCSSコンビネータを見つけることができません。私は#cubeを回転すると思う、私は隣接する兄弟セレクタ（+）を使用する必要がありますが、それは動作していません。3-Dキューブを回転させるための適切な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>
動作します。 JQueryを使ってもいいですか？それは可能です –
ああ！.......私はCSSの任意の代替を与えることができます......また、私は＃キューブの兄弟＃horizontalの教えてください？ –