Question

我想旋转立方体，因为一个人盘旋在红色div上。我无法找到css组合来实现这一目标。我想旋转#cube，我需要使用相邻的兄弟选择器（+），但它不起作用。

#container {
	position: relative;
	top: 100px;
	left: 100px;
	perspective: 1000px;
	perspective-origin: 100px 100px;
}
#cube {
	position: absolute;
	width: 200px;
	height: 200px;
	transform-style: preserve-3d;
	transition: transform 2s;
	transform-origin: 50% 50%;
}
#cube div {
	border: 2px solid black;
	position: absolute; 
	border-radius: 50px;
	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);
	background-color: rgba(80,234,200,0.3);
}
#bottom {
	transform: rotateX(-90deg) translateZ(100px);
	background-color: rgba(180,234,2,0.3);
}
#horizontal {
	position: absolute;
	top: 300px;
	height: 50px;
	width: 100px;
	background-color: red;
}
#horizontal:hover + #cube{
	transform: rotateX(360deg);
}

<html>
    <head>
	    <link rel="stylesheet" href="style.css">
	</head>
    <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 id="horizontal"></div>
			<div id="vertical"></div>
		</div>
	</body>
</html>

Answer 1

是的，thery是兄弟姐妹，但CSS规则只是前进。只需更改DOM中的水平位置即可使用

#container {
	position: relative;
	top: 100px;
	left: 100px;
	perspective: 1000px;
	perspective-origin: 100px 100px;
}
#cube {
	position: absolute;
	width: 200px;
	height: 200px;
	transform-style: preserve-3d;
	transition: transform 2s;
	transform-origin: 50% 50%;
}
#cube div {
	border: 2px solid black;
	position: absolute; 
	border-radius: 50px;
	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);
	background-color: rgba(80,234,200,0.3);
}
#bottom {
	transform: rotateX(-90deg) translateZ(100px);
	background-color: rgba(180,234,2,0.3);
}
#horizontal {
	position: absolute;
	top: 300px;
	height: 50px;
	width: 100px;
	background-color: red;
}
#horizontal:hover + #cube{
	transform: rotateX(360deg);
}

<html>
    <head>
	    <link rel="stylesheet" href="style.css">
	</head>
    <body>
	    <div id="container">
			<div id="horizontal"></div>
		    <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 id="vertical"></div>
		</div>
	</body>
</html>

适用于旋转三维立方体的css组合器

1 个答案: