Question

我一直在使用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

绘制一个很大的矩形，但是向上缩放它们一直在逃避我。

Answer 1

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

使用css3定义scale3d原点

1 个答案: