第二张图是正确的竖向排列
第一张图数字是顺时针旋转了90°汉字是竖向排列的
方法一图片去做
方法二用用css3把数字旋转transform:rotate(90deg),汉字竖向排,你是限制宽度还是用其他方法都可以。
备注(我没试过,但是应该还会有其他问题,本人觉得这种动态文字排版不合理)
1.对于行内元素是无效的
2.会保留原来的位置,提高盒子的层级 与relative相对定位类似
transform: translate(X,Y)
1.填入具体数值,例如 translate(10px,10px) ,需要填写单位,元素将会向右位移10px,向下位移10px
其中如果数值为负数,则位移的方向相反
2.填入百分比数字,例如 translate(10%,10%) ,元素将会向右位移 自身元素 的width 10%距离和向下位移 自身元素 的height 10%距离
transform: rotate(X)
需要在X位置填写相对应的旋转角度,并带上单位deg,例子: rotate(90deg)
元素将会默认在自身的垂直水平居中点进行旋转对应的X度
transform-origin: X Y
可以通过改变元素的该属性,导致元素旋转的原点进行改变
1.填入的X Y值为方位名词,例如top\bottom\left\right
例子: transform-origin: left top 元素将在元素的左上角为原点进行旋转运动
transform: scale(X)
可以通过改变元素的该属性,导致元素进行X倍的缩放X为负数时将会产生镜面效果
例子: transform: scale(1.2) 元素将变为原来的1.2倍.
transform连写,如果有发生平移,都需要先写平移属性
例子 transform: translateX(300%) rotate(360deg)
可以在发生transform的元素中设置transition属性
例子: transition: 1s 代表触发元素发生变化后,变化将于1s内完成