重庆分公司,新征程启航
为企业提供网站建设、域名注册、服务器等服务
CSS 中transform-origin属性的作用是什么?相信很多没有经验的人对此束手无策,为此本文总结了问题出现的原因和解决方法,通过这篇文章希望你能解决这个问题。
让客户满意是我们工作的目标,不断超越客户的期望值来自于我们对这个行业的热爱。我们立志把好的技术通过有效、简单的方式提供给客户,将通过不懈努力成为客户在信息化领域值得信任、有价值的长期合作伙伴,公司提供的服务项目有:国际域名空间、网站空间、营销软件、网站建设、阜新网站维护、网站推广。
transform-origin
作用
这个属性是用来改变元素变形的原点,一般用来配合旋转来使用最多。接收参数可为一个、两个、三个。当为两个值,分别代表距离盒模型左侧的值,如transform-origin: 50px 50px;
,表示该容器的旋转中心变为以盒模型左上角为原点,X和Y轴距离50px为原点进行旋转。
时钟时针的绘制
中间那个竖条为我们最初始设置的,后面的均基于此进行旋转
从下面的CSS代码可以看出,我们设置了旋转中心为第一个竖线的(3,105)px为原点进行旋转,这里的距离为距离盒模型左侧的值,理解这一点,就可以写出其他的时针了,然后分别旋转即可得到时针。由于不理解这里的取值时相对于哪个位置进行计算的,因而踩了不少的坑。
CSS
.hour { position: absolute; left: 105px; width: 6px; height: 50px; background-color: #000; border-radius:6px; -webkit-transform-origin:3px 105px; transform-origin:3px 105px; } .hour:nth-child(2) { transform:rotate(45deg); } .hour:nth-child(3) { transform:rotate(90deg); } .hour:nth-child(4) { transform:rotate(-45deg); } .hour:nth-child(5) { transform:rotate(-90deg); }
css是一种用来表现HTML或XML等文件样式的计算机语言,主要是用来设计网页的样式,使网页更加美化。它也是一种定义样式结构如字体、颜色、位置等的语言,并且css样式可以直接存储于HTML网页或者单独的样式单文件中,而样式规则的优先级由css根据这个层次结构决定,从而实现级联效果,发展至今,css不仅能装饰网页,也可以配合各种脚本对于网页进行格式化。
看完上述内容,你们掌握CSS 中transform-origin属性的作用是什么的方法了吗?如果还想学到更多技能或想了解更多相关内容,欢迎关注创新互联行业资讯频道,感谢各位的阅读!