0

我一直致力于使用 css3 创建动画条形图。它在酒吧的侧面一直运作良好，但酒吧的顶部和底部一直存在问题。

我一直在通过 jQuery 更改它们的 css 'height' 属性来缩放侧面，但我意识到这不是最好的方法。我试过使用 scale3d()，但它总是从似乎是对象中心的地方缩放对象。我需要它从立方体底部缩放对象。这是我到目前为止的css（使用手写笔）

#barTwo
#barOne
#barThree
#barFour
    position relative
    -webkit-transition -webkit-transform 2s linear
    -webkit-transform-style preserve-3d
    height 400px
    width 100px
    float left
    margin-left 100px

.face
    position absolute
    height 360px
    width 80px
    padding 20px
    background-color rgba(50, 50, 50, 0.3)
    bottom 0px
    left 0px
    -webkit-transition 10000ms all

.one /* top */
    -webkit-transform rotateX(90deg) translateZ(340px)
    height 80px     
    background-color rgba(50, 50, 50, 0.9)
    display none

.two /* front */
    -webkit-transform translateZ(60px)
    background-color rgba(50, 50, 50, 0.7)

.three /* right */
    -webkit-transform rotateY(90deg) translateZ(60px)
    background-color rgba(50, 50, 50, 0.6)

.four /* back */
    -webkit-transform rotateY(180deg) translateZ(60px)
    background-color rgba(50, 50, 50, 0.7)

.five /* left */
    -webkit-transform rotateY(-90deg) translateZ(60px)
    background-color rgba(50, 50, 50, 0.8)

.six /* bottom */
    -webkit-transform rotateX(-90deg) translateZ(60px) rotate(180deg)
    background-color rgba(50, 50, 50, 0.9)
    height 80px
    display none

画了一个很棒的矩形，但我一直在想“向上”缩放它们。

4

1 回答 1

1

您正在寻找*-transform-origin房产。其默认值为 50%、50%。如果你想让事情向上扩展，那么 50%、100% 就是你要找的（它将原点设置在元素的底部。）

于 2012-11-01T22:43:07.847 回答