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 に答える