CSS transition - tilting test-tube containing liquid

Question

I have a simple CSS3 transition that involves a test tube, containing liquid, being tilted 60 degrees to the right.

Of course, liquid always stays on the horizontal plane, and it's this effect I'm having trouble with. I do have it working in a fashion, but the liquid's transition is far from convincing.

The idea was to simply rotate the liquid element, which is a child of the tube element, by the same but opposite degree, so -60. So the net, visual effect is the liquid stays at rotation 0deg. The liquid element has adequate width to allow for this rotation without showing white space.

Code Pen: http://codepen.io/anon/pen/sIDtp (currently has only -moz prefixes, no -webkit)

HTML:

<div id='container'>
  <div id='tube'><div></div></div>
  <div id='tube_bottom'></div>
</div>

CSS

div, button { display: block; position: relative; }
#container {
  width: 50px;
  height: 150px;
  top: 30px;
  margin: 0 auto;
  transition: -moz-transform 1s
}
#container.transition { moz-transform: rotate(60deg); }
#tube {
  border: solid 6px red;
  border-top: none;
  border-bottom: none;
  width: 100%;
  height: 100%;
  z-index: 1;
  background: #fff;
  overflow: hidden;
}
#tube_bottom {
  width: 100%;
  height: 30%;
  border-radius: 50%;
  position: absolute;
  bottom: -15%;
  border: solid 6px red;
  background: blue;
}
#tube div {
  position: absolute;
  left: -175px;
  width: 400px;
  height: 85%;
  top: 30%;
  background: blue;
  transition: -moz-transform 1s, top 1s;
}
#container.transition #tube div { moz-transform: rotate(-60deg); top: 70%; }

As you can see, I'm having to also modify the top property, which isn't ideal and tells me I'm probably not going about this the right way. It almost looks as if the liquid element is failing to rotate about its central point (which I believe is the default value for transform-origin.

Can anyone give me some tips as to how to make this transition look natural?

Answer 1

Different approach : How about skewing the water?

This tube is made with :

• one div and 2 pseudo elements
• transform skew and rotate
• box-shadows

DEMO (no vendor prefixes)

HTML :

<div class="tube"></div>

CSS :

.tube {
    border: solid 6px red;
    border-top: none;
    border-bottom:none;
    width:50px;
    height:180px;
    position:relative;
    margin:0 auto;
    transition:transform 1s;
}
.tube:after, .tube:before {
    content:'';
    position:absolute;
    width:100%;
    background:blue;
}
.tube:after {
    top:100%;
    left:-6px;
    width:100%;
    padding-bottom:100%;
    border: solid 6px red;
    border-top: none;
    border-bottom-left-radius: 50%;
    border-bottom-right-radius: 50%;
    box-shadow: 0px -30px 0px -6px blue, 0px -50px 0px -6px blue;
}
.tube:before {
    bottom:0;
    height: 100px;
    width:50px;
    z-index:-1;
    transition:transform 1s;
}
.tube:hover {
    transform: rotate(60deg);
}
.tube:hover:before {
    transform: skewY(-60deg);
}

Answer 2

Since the width perspective of the tube increases as it turns, the effect speed of the tilting liquid should be inversely proportional, slower when it turns, and faster when it gets back...

I got a better looking effect by setting a different transition speed for turn, and turn back:

Updated Codepen

#tube div {
  position: absolute;
  left: -175px;
  width: 400px;
  height: 85%;
  top: 30%;
  background: blue;
  transition: -webkit-transform 1s, top 0.5s;
}
#container.transition #tube div {
  -webkit-transform: rotate(-60deg);
  transition: -webkit-transform 1s, top 1.4s;
  top: 70%;
}

Though it could still get some improvements... (Sorry, I changed it all to -webkit-)

But perhaps you should consider using animation and @keyframes, so you could set specific values on each percentage of the transition.