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

我有一个简单的CSS3转换，包括一个试管，里面有液体，向右倾斜60度

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

这个想法是简单地旋转液体元素，它是管状元素的子元素，旋转相同但相反的角度，so-60。因此，净，视觉效果是液体保持旋转0度。液体元件具有足够的宽度，允许在不显示空白的情况下旋转

代码笔：（目前只有-moz前缀，没有-webkit）

HTML:

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

正如您所看到的，我还必须修改

top

属性，这并不理想，并且告诉我我可能没有正确的方法。看起来液体元素几乎无法围绕其中心点旋转（我认为这是

变换原点

的默认值）

---

有谁能给我一些建议，如何使这种转变看起来更自然吗？

由于管子的宽度随着转动而增加，倾斜液体的影响速度应该成反比，转动时变慢，返回时变快

我通过为“转弯”和“折返”设置不同的过渡速度，获得了更好的外观效果：

虽然它仍然可以得到一些改进…（对不起，我把它全部改成了

-webkit-

）

---

但也许你应该考虑使用<代码>动画和<代码> @关键帧，这样你就可以在每个转换的百分比上设置特定值。

< P> <强>不同的方法：< /强>如何歪斜水？

该管由以下材料制成：

• 一个div和2个伪元素
• 变换倾斜和旋转
• 盒子阴影

（无供应商前缀）

HTML:

---

谢谢这个-有趣的细节。我接受了另一个答案，只是因为它看起来好一点，并且使用了伪内容，但仍然是+1。有没有想过在悬停时，如何将水弄到管子的边缘，好像它准备滴落出来？还有，最后，是什么控制（悬停前）管子中的水位管？我不太明白如何修改以使管更满或更空，即水的高度在这里/更低。@Utkanos这是

的高度：在
伪元素之后检查此项
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%; }

#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%;
}

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

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