I'm trying to use CSS to essentially 'animate' a few objects, using skewY and rotateY. It's still a WIP, but I have a JSFiddle that shows the code. On hover, the three lines on the right should smoothly flip around a central vertical axis onto the left. The vertical line (line1) and the higher line (line2) both seem to flip over with no problem. Doing the same with the third line (line3) results in strange behaviour - it seems to rotate around Y, but Y appers to be at a 45 degree angle? Then once the transition is complete it flicks into the right place, almost as if it is doing parts of the transform in order rather than simultaneously, as happens with line2. Ignore the red line through the middle, it was used for spacing.
The intention is for all three lines to make up a triangle, and flip as a triangle where it looks like a single object, so line1 and line2 are doing exactly what I'm after. The object does have to be composed of three parts because the next part of the animation will leave a second version of that shape underneath, like a reflection.
The attached JSFiddle is the closest I've been to success, but I have had one other version where line3 ends up in the right place, but 'bounces' and disconnects from the rest of the triangle on the way there. In all other versions line3 just ends up somewhere random. I've tried swapping various things around in the transform, changing the transform origin etc but for some reason this has me bamboozled. I don't undersand why it is behaving like this. I'm obviously still lacking some understanding of how the skew/rotate behaviour works as well, because this seems like it should be an easy problem to fix, yet here I am. Any help would be much appreciated. Also open to suggestions of how I can do this completely differently, since my other alternative was an Adobe Illustrator/After Effects combo. Thanks.
.background {
background-color: #DEDEDE;
width: 200px;
height: 200px;
position: relative;
}
.b {
background-color: #DEDEDE;
width: 100px;
height: 100px;
}
.d {
background-color: red;
width: 200px;
height: 2px;
position: absolute;
bottom: 99px;
left: 0px;
}
.line1 {
height: 200px;
border-left: 5px solid black;
position: absolute;
left: 110px;
top: 0px;
transform-origin: -10px 100px;
transition: transform 1s;
}
.background:hover>.line1 {
transform: rotateY(180deg);
}
.line2 {
width: 85px;
border-top: 7px solid black;
position: absolute;
left: 115px;
top: -17px;
transform-origin: -15px 0px;
transform: skewY(48.5deg);
transition: transform 1s;
}
.background:hover>.line2 {
transform: rotateY(180deg) skewY(48.5deg);
}
.line3 {
width: 85px;
border-bottom: 7px solid black;
position: absolute;
left: 115px;
top: 210px;
transform-origin: -15px;
transform: skewY(-48.5deg);
transition: transform 1s;
}
.background:hover>.line3 {
transform: rotateY(180deg) skewY(-48.5deg);
}<!DOCTYPE html>
<head>
<title>DB</title>
<link href="style.css" rel="stylesheet" type="text/css">
</head>
<body>
<div class="background">
<div class="line1"></div>
<div class="d"></div>
<div class="line2"></div>
<div class="line3"></div>
</div>
</body>This seems to be a bug related to interpolation. Set a default rotation equal to 0deg to avoid this:
.background {
background-color: #DEDEDE;
width: 200px;
height: 200px;
position: relative;
}
.b {
background-color: #DEDEDE;
width: 100px;
height: 100px;
}
.d {
background-color: red;
width: 200px;
height: 2px;
position: absolute;
bottom: 99px;
left: 0px;
}
.line1 {
height: 200px;
border-left: 5px solid black;
position: absolute;
left: 110px;
top: 0px;
transform-origin: -10px 100px;
transition: transform 1s;
}
.background:hover>.line1 {
transform: rotateY(180deg);
}
.line2 {
width: 85px;
border-top: 7px solid black;
position: absolute;
left: 115px;
top: -17px;
transform-origin: -15px 0px;
transform: rotateY(0deg) skewY(48.5deg);
transition: transform 1s;
}
.background:hover>.line2 {
transform: rotateY(180deg) skewY(48.5deg);
}
.line3 {
width: 85px;
border-bottom: 7px solid black;
position: absolute;
left: 115px;
top: 210px;
transform-origin: -15px;
transform:rotateY(0deg) skewY(-48.5deg);
transition: transform 1s;
}
.background:hover>.line3 {
transform: rotateY(180deg) skewY(-48.5deg);
}<!DOCTYPE html>
<head>
<title>DB</title>
<link href="style.css" rel="stylesheet" type="text/css">
</head>
<body>
<div class="background">
<div class="line1"></div>
<div class="d"></div>
<div class="line2"></div>
<div class="line3"></div>
</div>
</body>Related question to get more details: Weird behavior when rotating an element on hover