1
Ich möchte den Würfel drehen, während man über das rote div schwebt. Ich kann den css-Kombinator nicht finden, um dies zu erreichen. Ich denke, um #cube zu drehen, muss ich benachbarten Geschwisterselektor (+) verwenden, aber es funktioniert nicht.Korrekte Css-Kombinatoren zum Drehen eines 3-D-Würfels
#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>
Diese in CSS3 Arbeit nicht möglich ist. Kann ich es mit JQuery machen? Es ist möglich, dass –
Oh! ....... können Sie mir irgendeine Alternative in CSS ...... und auch sagen mir nicht #cube ein Geschwister von #horizontal? –