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? –