css3属性transform-origin怎么用


这篇文章主要为大家展示了“css3属性transform-origin怎么用”,内容简而易懂,条理清晰,希望能够帮助大家解决疑惑,下面让小编带领大家一起研究并学习一下“css3属性transform-origin怎么用”这篇文章吧。
  transform是CSS3里的变换属性,常用的有translate(平移)、rotate(旋转)、skew(倾斜)、scale(缩放)方法。而transform-origin并不是transform的属性值,其具有独立的语法,但值得注意的是,transform-origin必须配合transform来使用,这个从名字也可以看得出来,就是给transform设置的各种动作设置一个参考点。默认情况下,元素的动作参考点为元素盒子的中心。transform可以设置九个位置的值,水平方向有left | center | right 三个值,垂直方向也有三个,分别是 top | center |bottom ,故一共有九个。
  语法:
  transform-origin:[ | | left | center① | right ] [ | | top | center② | bottom ]?   默认值:50% 50%,效果等同于center center
  适用于:所有块级元素及某些内联元素
  取值:
  :用百分比指定坐标值。可以为负值。   :用长度值指定坐标值。可以为负值。
  left:指定原点的横坐标为left
  center①:指定原点的横坐标为center
  right:指定原点的横坐标为right
  top:指定原点的纵坐标为top
  center②:指定原点的纵坐标为center
  bottom:指定原点的纵坐标为bottom
  说明:
  设置或检索对象以某个原点进行转换。
  该属性提供2个参数值。
  **- 如果提供两个,第一个用于横坐标,第二个用于纵坐标。
  如果只提供一个,该值将用于横坐标;纵坐标将默免费云主机域名认为50%。**
  对应的脚本特性为transformOrigin。
  兼容性:
  transform属性
  默认情况,变形的原点在元素的中心点,或者是元素X轴和Y轴的50%处,如下图所示:
  我们没有使用transform-origin改变元素原点位置的情况下,CSS变形进行的旋转、移位、缩放等操作都是以元素自己中心(变形原点)位置进行变形的。但很多时候需要在不同的位置对元素进行变形操作,我们就可以使用transform-origin来对元素进行原点位置改变,使元素原点不在元素的中心位置,以达到需要的原点位置。
  看上去transform-origin取值与background-position取值类似。为了方便记忆,可以把关键词和百分比值对比起来记:
  top = top center = center top = 50% 0
  right = right center = center right = 100%或(100% 50%)
  bottom = bottom center = center bottom = 50% 100%
  left = left center = center left = 0或(0 50%)
  center = center center = 50%或(50% 50%)
  top left = left top = 0 0
  right top = top right = 100% 0
  bottom right = right bottom = 100% 100%
  bottom left = left bottom = 0 100%
  为了让大家能一眼看明白,下面截图以transform中的旋转rotate()为例,并transform-origin取值不一样时的效果:
  transform-origin取值为center(或center center或50% 或50% 50%):
  transform-origin取值为top(或top center或center top或50% 0):
  transform-origin取值为right(或right center 或center right 或 100% 或 100% 50%):
  transform-origin取值为bottom(或bottom center 或center bottom 或 50% 100%):
  transform-origin取值为left(或left center或center left或0或0 50%):
  transform-origin取值为top left(或left top或0 0):
  transform-origin取值为right top(或top right或100% 0):
  transform-origin取值为bottom right(或right bottom或100% 100%):
  transform-origin取值为left bottom(或bottom left 或 0 100%):
  实例:摆动的小球(钟摆效果)
  从上图中可以看出,小球摆动效果运用了动画原理,以及transform-origin原理(很重要)。首先,先确定好球的变形中心点,然后在添加动画效果。
  原理图:
  
  .sphere {
  width: 60px;
  height: 60px;
  background: #9485FD;
  border-radius: 100%;
  margin: 280px auto;
  background: radial-gradient(circle at top center, #c6bff6, #6959d8, #372a91);
  transform-origin: center -200px;
  animation: clock 4s infinite linear;
  position: relative;
  }
  .sphere::before {
  content: “”;
  position: absolute;
  bottom: 100%;
  left: 50%;
  width: 1px;
  height: 200px;
  border-left: 1px #9485FD dashed;
  }
  @keyframes clock {
  0% {
  transform: rotate(0deg)
  }
  25% {
  transform: rotate(30deg)
  }
  50% {
  transform: rotate(0deg)
  }
  75% {
  transform: rotate(-30deg)
  }
  100% {
  transform: rotate(0deg)
  }
  }以上是“css3属性transform-origin怎么用”这篇文章的所有内容,感谢各位的阅读!相信大家都有了一定的了解,希望分享的内容对大家有所帮助,如果还想学习更多知识,欢迎关注百云主机行业资讯频道!

相关推荐: 基于PyQt5如何制作一个动态指针时钟

这篇文章主要介绍基于PyQt5如何制作一个动态指针时钟,文中介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们一定要看完!想实现这样一个功能,然后pyqt5中又没有现成的组件可以使用,于是就想着只能通过绘图的方式来实现。说到绘图的话,turtle框架无疑是最…

免责声明:本站发布的图片视频文字,以转载和分享为主,文章观点不代表本站立场,本站不承担相关法律责任;如果涉及侵权请联系邮箱:360163164@qq.com举报,并提供相关证据,经查实将立刻删除涉嫌侵权内容。

Like (0)
Donate 微信扫一扫 微信扫一扫
Previous 09/25 10:28
Next 09/25 10:29

相关推荐