Dhruv Chadha Dhruv Chadha - 6 months ago 9
CSS Question

Proper css combinators for rotating a 3-D cube

I want to rotate the cube as one hovers over the red div. I am unable to find the css combinator to achieve this. I think to rotate

#cube
, i need to use adjacent sibling selector (+) but it is not working.



#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

Yes, thery are siblings, but CSS rules only go forward. Just change horizontal position in the DOM and it will work

#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>

Comments