用CSS怎么设置数字竖排。汉字我可以做到,但数字不行,看图(这是PS里排的)

html-css022

用CSS怎么设置数字竖排。汉字我可以做到,但数字不行,看图(这是PS里排的),第1张

什么汉字可以,数字不行了?首先你得知道什么是竖向排列

第二张图是正确的竖向排列

第一张图数字是顺时针旋转了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内完成