重庆分公司,新征程启航

为企业提供网站建设、域名注册、服务器等服务

CSS中transform-origin属性的作用是什么-创新互联

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

成都创新互联,专注为中小企业提供官网建设、营销型网站制作、成都响应式网站建设公司、展示型成都网站制作、成都网站建设等服务,帮助中小企业通过网站体现价值、有效益。帮助企业快速建站、解决网站建设与网站营销推广问题。

transform-origin作用


这个属性是用来改变元素变形的原点,一般用来配合旋转来使用最多。接收参数可为一个、两个、三个。当为两个值,分别代表距离盒模型左侧的值,如transform-origin: 50px 50px;,表示该容器的旋转中心变为以盒模型左上角为原点,X和Y轴距离50px为原点进行旋转。

CSS 中transform-origin属性的作用是什么

时钟时针的绘制

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

CSS 中transform-origin属性的作用是什么

  
    
    
    
            

从下面的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

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

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


当前题目:CSS中transform-origin属性的作用是什么-创新互联
文章路径:http://cqcxhl.com/article/ehhip.html