qiupu 2019-06-29
transform是CSS3里的变换属性,常用的有translate(平移)、rotate(旋转)、skew(倾斜)、scale(缩放)方法。而transform-origin并不是transform的属性值,其具有独立的语法,但值得注意的是,transform-origin必须配合transform来使用,这个从名字也可以看得出来,就是给transform设置的各种动作设置一个参考点。默认情况下,元素的动作参考点为元素盒子的中心。transform可以设置九个位置的值,水平方向有left | center | right 三个值,垂直方向也有三个,分别是 top | center |bottom ,故一共有九个。
transform-origin:[ <percentage> | <length> | left | center① | right ] [ <percentage> | <length> | top | center② | bottom ]?
默认情况,变形的原点在元素的中心点,或者是元素X轴和Y轴的50%处,如下图所示:
我们没有使用transform-origin改变元素原点位置的情况下,CSS变形进行的旋转、移位、缩放等操作都是以元素自己中心(变形原点)位置进行变形的。但很多时候需要在不同的位置对元素进行变形操作,我们就可以使用transform-origin来对元素进行原点位置改变,使元素原点不在元素的中心位置,以达到需要的原点位置。
看上去transform-origin取值与background-position取值类似。为了方便记忆,可以把关键词和百分比值对比起来记:
为了让大家能一眼看明白,下面截图以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%):
参考文章:http://www.w3cplus.com/css3/t...
从上图中可以看出,小球摆动效果运用了动画原理,以及transform-origin原理(很重要)。首先,先确定好球的变形中心点,然后在添加动画效果。
原理图:
<div class="sphere"></div>
.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) } }
/*垂直居中,div上边界距离窗口上边的距离为窗口高度的50%,并针对不同浏览器进行兼容。-- 在外层添加一个div,把行内容居中,添加.row .justify-content-center -->