CSS 过渡 - 包含液体的倾斜试管

我有一个简单的 CSS3 过渡，它涉及一个试管，其中装有液体，向右倾斜 60 度。

当然，液体总是停留在水平面上，这就是我遇到的问题。我确实让它以某种方式工作，但液体的过渡远不能令人信服。

这个想法是简单地旋转液体元素，它是管元素的子元素，旋转相同但相反的 Angular ，所以 -60。所以净，视觉效果是液体停留在旋转 0 度。液体元素有足够的宽度来允许这种旋转而不显示空白。

代码笔: http://codepen.io/anon/pen/sIDtp(目前只有 -moz 前缀，没有 -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%; }

如您所见，我还必须修改 top 属性，这并不理想，并告诉我我可能不会以正确的方式进行此操作。它几乎看起来好像液体元素无法围绕其中心点旋转(我认为这是 transform-origin 的默认值。

谁能给我一些关于如何使这种过渡看起来自然的提示？

最佳答案

不同的方法: 倾斜水怎么样？

该管由以下 Material 制成:

一个 div 和 2 个伪元素

变换倾斜和旋转

box-shadows

DEMO (无供应商前缀)

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);
}

关于CSS 过渡 - 包含液体的倾斜试管，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/25812198/