CSS中transform-origin属性的作用是什么 - 行业资讯 - 肥雀云

CSS中transform-origin属性的作用是什么?相信很多没有经验的人对此束手无策,为此本文总结了问题出现的原因和解决方法,通过这篇文章希望你能解决这个问题。

<代码> transform-origin>

这个属性是用来改变元素变形的原点,一般用来配合旋转来使用最多。接收参数可为一个,两个,三个。当为两个值,分别代表距离盒模型左侧的值,如<代码> transform-origin: 50 px 50 px;>

<强>时钟时针的绘制

中间那个竖条为我们最初始设置的,后面的均基于此进行旋转

,, & lt; div 类=癱lock"比; 　　,,,& lt; div 类=癶our"祝辞& lt;/div> 　　,,,& lt; div 类=癶our"祝辞& lt;/div> 　　,,,& lt; div 类=癶our"祝辞& lt;/div> 　　,,,& lt; div 类=癶our"祝辞& lt;/div> 　　,,,& lt; div 类=癶our"祝辞& lt;/div> 　　& lt;才能/div>

从下面的CSS代码可以看的出,我们设置了旋转中心为第一个竖线的(3105)像素为原点进行旋转,这里的距离为距离盒模型左侧的值,理解这一点,就可以写出其他的时针了,然后分别旋转即可得到时针。由于不理解这里的取值时相对于哪个位置进行计算的,因而踩了不少的CSS坑。

.hour { 　　位置:才能,绝对; 　　,,左:105 px; 　　,,宽度:6 px; 　　,,身高:50 px; 　　,,背景颜色:# 000; 　　border - radius才能:6 px; 　　-webkit-transform-origin才能:3 px 105 px,, 　　,,,,,,,,,transform-origin: 3 px 105 px; 　　} 　　.hour: nth-child (2), { 　　变换才能:旋转(45度); 　　} 　　.hour: nth-child (3), { 　　变换才能:旋转(90度); 　　} 　　.hour: nth-child (4), { 　　变换才能:旋转(-45度); 　　} 　　.hour: nth-child (5), { 　　变换才能:旋转(-90度); 　　} 什么是css

css是一种用来表现HTML或XML等文件样式的计算机语言,主要是用来设计网页的样式,使网页更加美化。它也是一种定义样式结构如字体,颜色,位置等的语言,并且css样式可以直接存储于HTML网页或者单独的样式单文件中,而样式规则的优先级由css根据这个层次结构决定,从而实现级联效果,发展至今,css不仅能装饰网页,也可以配合各种脚本对于网页进行格式化。

看完上述内容,你们掌握css中transform-origin属性的作用是什么的方法了吗?如果还想学到更多技能或想了解更多相关内容,欢迎关注行业资讯频道,感谢各位的阅读!