摘要：是里的变换属性，常用的有平移旋转倾斜缩放方法。默认情况下，元素的动作参考点为元素盒子的中心。语法默认值，效果等同于适用于所有块级元素及某些内联元素取值用百分比指定坐标值。该属性提供个参数值。对应的脚本特性为。
transform是CSS3里的变换属性，常用的有translate（平移）、rotate（旋转）、skew(倾斜)、scale(缩放)方法。而transform-origin并不是transform的属性值，其具有独立的语法，但值得注意的是，transform-origin必须配合transform来使用，这个从名字也可以看得出来，就是给transform设置的各种动作设置一个参考点。默认情况下，元素的动作参考点为元素盒子的中心。transform可以设置九个位置的值，水平方向有left | center | right 三个值，垂直方向也有三个，分别是 top | center |bottom ，故一共有九个。语法：
transform-origin：[
默认值：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％）:
参考文章：http://www.w3cplus.com/css3/t...
实例：摆动的小球（钟摆效果）从上图中可以看出，小球摆动效果运用了动画原理，以及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)
}
}
文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。
转载请注明本文地址：https://www.ucloud.cn/yun/114264.html
摘要：是里的变换属性，常用的有平移旋转倾斜缩放方法。默认情况下，元素的动作参考点为元素盒子的中心。语法默认值，效果等同于适用于所有块级元素及某些内联元素取值用百分比指定坐标值。该属性提供个参数值。对应的脚本特性为。 transform是CSS3里的变换属性，常用的有translate（平移）、rotate（旋转）、skew(倾斜)、scale(缩放)方法。而transform-origin并...
摘要：转换能够对元素进行移动缩放转动拉长或拉伸。和和的参数可以为。过渡该属性和配合使用，实现鼠标移入动画效果。实例动画该属性和配合使用。规则用于创建动画。在中规定某项样式，就能创建由当前样式逐渐改为新样式的动画效果。 CSS3中有三个属性：transform、transition、animation，一直容易搞混，今天特意拎出来理一理。 transform 转换 transform 能够对元...
摘要：中制作动画的几个属性中的变形过渡动画。默认值为，为时，表示变化是瞬时的，看不到过渡效果。实现动画效果主要由两部分组成通过类似动画中的帧来声明一个动画在属性中调用关键帧声明的动画。 css3中制作动画的几个属性：css3中的变形（transform）、过渡（transition）、动画（animation）。 一、 CSS3变形（transform） 语法： transform ： no...
摘要：属性决定元素如何定位，通过实现位置的改变默认值，元素按照标准流的方式正常排列。绝对定位，不受父元素父容器限制。可以设置元素的叠加顺序，但依赖定位属性大的元素会覆盖小的元素为的元素不参与层级比较为负值，元素被普通流中的元素覆盖 transform 变形属性属性：translate 平移，rotate 旋转, scale 缩放,skew 倾斜 ◆ translate :指定对象的2D平移第一个...
阅读 921·2021-11-24 10:21
阅读 2427·2021-11-19 11:35
阅读 1424·2019-08-30 15:55
阅读 1117·2019-08-30 15:54
阅读 1102·2019-08-30 15:53
阅读 3380·2019-08-29 17:21
阅读 3199·2019-08-29 16:12
阅读 3283·2019-08-29 15:23
