transform-origin：right

`transform-origin: right;` 是一种CSS属性，它定义了一个元素在进行旋转、缩放、倾斜等变换时的基准点，即变换的起始点。这里的 `right` 指定了基准点在元素的右侧中心位置。因此，如果对元素应用 `transform: rotate(45deg)`，它会以右侧中心点为基准点进行旋转。

相关问题

input:focus ~ .right { transform: scaleY(1); transform-origin: bottom center; }是什么意思

这段 CSS 代码表示当 input 元素具有焦点时，选择器 ~ .right 所匹配的元素（即与 input 元素同级且在它后面的 class 名为 right 的元素）会执行 transform 属性，使其在垂直方向上 scaleY 缩放为原来的 1 倍（即不缩放），并以底部中心点为原点进行变换。这通常用于实现一些交互效果，例如当用户输入时，相关的元素可以动态地改变样式或位置来提高可视性和反馈。

article { position: relative; transform-origin: 10% 50%; width: 100%; background-image: linear-gradient(45deg, #26d0ce, #1a2980); } article .wrapper { margin: auto; padding: 2em; max-width: 90%; height: 100%; display: flex; flex-direction: column; justify-content: space-between; } article .wrapper h1 { margin: 0; } article .wrapper .footer { text-align: right; }

这段代码是一个基本的CSS样式规则，用于设置一个网页文章（article）的样式。其中：

- `position: relative;` 表示该元素的定位方式为相对定位，即相对于元素本身原来所在的位置进行定位；
- `transform-origin: 10% 50%;` 表示该元素的变形起点为距离左侧10%、距离顶部50%的位置；
- `width: 100%;` 表示该元素的宽度为100%，即占据整个父容器的宽度；
- `background-image: linear-gradient(45deg, #26d0ce, #1a2980);` 表示该元素的背景颜色为从左上角到右下角的45度渐变色，颜色从#26d0ce到#1a2980；
- `.wrapper` 表示该元素内部的一个子元素，用于包裹文章内容；
- `margin: auto;` 表示该元素的外边距为自动，即在父容器中水平居中；
- `padding: 2em;` 表示该元素的内边距为2em；
- `max-width: 90%;` 表示该元素的最大宽度为父容器宽度的90%；
- `height: 100%;` 表示该元素的高度为100%，即占据整个父容器的高度；
- `display: flex;` 表示该元素使用flex布局；
- `flex-direction: column;` 表示该元素内部的伸缩项目（flex items）按照列（垂直）方向排列；
- `justify-content: space-between;` 表示该元素内部的伸缩项目之间的间距平均分布，即上下分别留有一定的空白间隔；
- `.wrapper h1` 表示该元素内部的h1标签元素；
- `margin: 0;` 表示该元素内部的h1标签元素的外边距为0；
- `.wrapper .footer` 表示该元素内部的class为footer的元素；
- `text-align: right;` 表示该元素内部的class为footer的元素的文本内容右对齐。