用css3定义scale3d原点
我一直在使用css3创建一个动画条形图。它一直在酒吧的两侧运作良好,但酒吧的顶部和底部一直存在问题 我一直在通过jQuery修改css的“height”属性来缩放侧面,但我意识到这不是最好的方法。我尝试过使用scale3d(),但它总是从对象的中心开始缩放对象。我需要它从立方体底部缩放对象。这是我到目前为止得到的css(使用手写笔)用css3定义scale3d原点,css,Css,我一直在使用css3创建一个动画条形图。它一直在酒吧的两侧运作良好,但酒吧的顶部和底部一直存在问题 我一直在通过jQuery修改css的“height”属性来缩放侧面,但我意识到这不是最好的方法。我尝试过使用scale3d(),但它总是从对象的中心开始缩放对象。我需要它从立方体底部缩放对象。这是我到目前为止得到的css(使用手写笔) 绘制了一个很棒的矩形,但我一直无法将其“向上”缩放。您正在查找*-transform origin属性。其默认值为50%,50%。如果你想让事情向上扩展,那么50%
绘制了一个很棒的矩形,但我一直无法将其“向上”缩放。您正在查找
*-transform origin
属性。其默认值为50%,50%。如果你想让事情向上扩展,那么50%和100%就是你想要的(它将原点设置在元素的底部。)我不知道为什么我很难找到它。非常感谢你。
#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