css：scale、rotate和translate属性演示

马黑黑 · 发表于 2025-11-4 12:10

请马上登录，朋友们都在花潮里等着你哦：）

您需要登录才可以下载或查看，没有账号？立即注册

x

本帖最后由马黑黑于 2025-11-4 22:38 编辑

本示例演示元素使用 transform: rotate 做关键帧动画之后依然可以独立使用相关属性

*/ @import 'https://638183.freep.cn/638183/web/tz/tz.e.css'; .son { position: absolute; width: 200px; height: 160px; border: 1px solid gray; display: grid; place-items: center; } .son:nth-child(2) { animation: rot 8s linear infinite; /* transform: scale(2); 这个无效，与上句冲突，transform: translate/skew 同理 */ scale: 2; /* scale: 2 1.5 也是合法的*/ translate: 200px -100px; /* skew: 45deg; 这个无效，目前没有 skew 属性 */ transition: rotate 1s; } .son:nth-child(2):hover { /* 鼠标指针滑入时还可以使用 rotate 属性 */ rotate: 1 -0.5 0.5 180deg; } @keyframes rot { from { transform: rotate(0deg); } to { transform: rotate(360deg); } } </style> <div id="pa" class="pa"> <div class="son">son No.1 - 200 * 160<br><br>I'm very quiet.</div> <div class="son">son No.2 - scale: 2<br><br><br>and rotating</div> </div>

马黑黑 · 发表于 2025-11-4 12:32

本帖最后由马黑黑于 2025-11-4 12:33 编辑

示例安排两个矩形div子元素，由 CSS 类选择器 .son 制定样式，宽高本来是一致的。

矩形一严格按照 .son 的样式渲染，保持原始尺寸和位置，作为参照；

矩形二执行关键帧动画 rot，并使用 scale 属性整体放大两倍、用 translate 属性右移200px、上移100px，矩形二还通过伪类选择器 :hover 创建指针滑过时的样式——用 rotate 属性令其旋转。

矩形二所使用的 scale、rotate、translate 属性，已经不是寄生在 transform 转换属性下的函数，它们和 transform 一样是CSS属性，平级（副科级享正科级待遇），可独当一面（独立使用），理论上与 transform 此前或此后使用的同名函数不相冲突，但应关切逻辑上的关系（例如都旋转时怎么转、都平移时会不会叠加等等）。

附：CSS属性与函数

下面示例的伪代码，红色的是CSS属性，红紫色的是CSS函数：

.box {
margin: auto;
background: url('图片地址');
transform: rotate(60deg);
rotate: 120deg;
}

和我们平时在CSS里设置某个选择器的 width 和 height 一样，上面代码中的最后一个属性 rotate，它是属性；而它上方那行中的 rotate，是函数，函数后面会有一对小括号 () 用以装载函数所需要的各种数据（参数）。