css：scale、rotate和translate属性演示
本帖最后由 马黑黑 于 2025-11-4 22:38 编辑 <br /><br /><div class="codebox" data-prev="1"><style>
<txt-green>/** scale、rotate、translate 已经可以从 transform 的函数变为属性，skew 保留原样，</txt-green>
<txt-green> 本示例演示元素使用 transform: rotate 做关键帧动画之后依然可以独立使用相关属性</txt-green>
<txt-green>*/</txt-green>
@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;
<txt-green>/* transform: scale(2); 这个无效，与上句冲突，transform: translate/skew 同理 */</txt-green>
scale: 2; <txt-green>/* scale: 2 1.5 也是合法的*/</txt-green>
translate: 200px -100px;
<txt-green>/* skew: 45deg; 这个无效，目前没有 skew 属性 */</txt-green>
transition: rotate 1s;
}
.son:nth-child(2):hover {
<txt-green>/* 鼠标指针滑入时还可以使用 rotate 属性 */</txt-green>
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>
</div>
<script type="module">
import linenumber from 'https://638183.freep.cn/638183/web/js/linenumber.js?v0';
linenumber();
</script> 本帖最后由 马黑黑 于 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，是函数，函数后面会有一对小括号 () 用以装载函数所需要的各种数据（参数）。 对CSS Transform 新增独立属性scale、translate、rotate
马老师与时俱进、化难为易、深入浅出地进行了直观演示
并给与简明、通俗、到位的讲解 ，由衷感谢{:4_180:}
这个有趣得紧! 研究辛苦了{:4_176:} 樵歌 发表于 2025-11-4 19:47
研究辛苦了
学习 樵歌 发表于 2025-11-4 19:46
这个有趣得紧!
css3还在迭代 杨帆 发表于 2025-11-4 16:36
对CSS Transform 新增独立属性scale、translate、rotate
马老师与时俱进、化难为易、深入浅出地进行了直 ...
{:4_191:} 预览看了效果，黑黑真的无所不能{:4_199:} 小辣椒 发表于 2025-11-4 22:01
预览看了效果，黑黑真的无所不能
果酱果酱 也就是因为封装里设置了 transform 转换属性下的函数，所以再设置是有问题的，但是可以直接使用css允许的 scale、rotate、translate 属性，这样就不冲突了。是这样理解吧{:4_187:} 我评分用光了，没法加分了，不好意思，等攒出来再加了 {:4_173:} 红影 发表于 2025-11-5 11:37
我评分用光了，没法加分了，不好意思，等攒出来再加了
这个没关系，不用介意的 红影 发表于 2025-11-5 11:36
也就是因为封装里设置了 transform 转换属性下的函数，所以再设置是有问题的，但是可以直接使用css允许的 s ...
是的
页:
[1]