花潮论坛

搜索
热搜: 活动 交友 discuz
查看: 33|回复: 13

css:scale、rotate和translate属性演示

[复制链接]
  • TA的每日心情
    慵懒
    2025-11-30 07:45
  • 签到天数: 1655 天

    [LV.Master]伴坛终老

    3024

    主题

    13万

    回帖

    28万

    积分

    管理员

    Rank: 9Rank: 9Rank: 9Rank: 9Rank: 9Rank: 9Rank: 9Rank: 9Rank: 9

    花潮帅哥鼠牛虎兔龙蛇马羊猴鸡狗猪多彩人生星月交辉奔放热烈海样胸怀春风拂面火热情怀优雅迷人神秘浪漫相遇之美鹰傲苍穹花好月圆紫色情节飞龙在天王者至尊大将风范音画大师天籁妙音共看流星风雨同行我心永远幸福快乐喜乐安康侠骨柔肠心想事成开朗大方花潮管理

    发表于 2025-11-4 12:10 | 显示全部楼层 |阅读模式

    请马上登录,朋友们都在花潮里等着你哦:)

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

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

    <style> /** scale、rotate、translate 已经可以从 transform 的函数变为属性,skew 保留原样, 本示例演示元素使用 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>

    评分

    参与人数 3威望 +130 金钱 +260 经验 +130 收起 理由
    小辣椒 + 50 + 100 + 50 赞一个!
    樵歌 + 50 + 100 + 50 精彩帖子!
    杨帆 + 30 + 60 + 30 精品文章!

    查看全部评分

  • TA的每日心情
    慵懒
    2025-11-30 07:45
  • 签到天数: 1655 天

    [LV.Master]伴坛终老

    3024

    主题

    13万

    回帖

    28万

    积分

    管理员

    Rank: 9Rank: 9Rank: 9Rank: 9Rank: 9Rank: 9Rank: 9Rank: 9Rank: 9

    花潮帅哥鼠牛虎兔龙蛇马羊猴鸡狗猪多彩人生星月交辉奔放热烈海样胸怀春风拂面火热情怀优雅迷人神秘浪漫相遇之美鹰傲苍穹花好月圆紫色情节飞龙在天王者至尊大将风范音画大师天籁妙音共看流星风雨同行我心永远幸福快乐喜乐安康侠骨柔肠心想事成开朗大方花潮管理

     楼主| 发表于 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,是函数,函数后面会有一对小括号 () 用以装载函数所需要的各种数据(参数)。

    评分

    参与人数 1威望 +50 金钱 +100 经验 +50 收起 理由
    小辣椒 + 50 + 100 + 50 很给力!

    查看全部评分

    回复 支持 反对

    使用道具 举报

  • TA的每日心情
    奋斗
    2025-11-30 00:22
  • 签到天数: 380 天

    [LV.9]以坛为家II

    296

    主题

    2548

    回帖

    1万

    积分

    版主

    Rank: 7Rank: 7Rank: 7Rank: 7Rank: 7Rank: 7Rank: 7

    花潮帅哥鼠牛虎兔龙蛇马羊猴鸡狗猪多彩人生鹰傲苍穹飞龙在天王者至尊大将风范花潮版主

    发表于 2025-11-4 16:36 | 显示全部楼层
    对CSS Transform 新增独立属性scale、translate、rotate

    马老师与时俱进、化难为易、深入浅出地进行了直观演示

    并给与简明、通俗、到位的讲解 ,由衷感谢

    ★青春是一个人的精神生命,奋斗是一个人最大的体面,学习是一个人最美的姿态。
    回复 支持 反对

    使用道具 举报

  • TA的每日心情
    开心
    2025-11-30 07:59
  • 签到天数: 634 天

    [LV.9]以坛为家II

    1368

    主题

    7万

    回帖

    14万

    积分

    管理员

    Rank: 9Rank: 9Rank: 9Rank: 9Rank: 9Rank: 9Rank: 9Rank: 9Rank: 9

    花潮帅哥多彩人生海样胸怀春风拂面青草情怀心曲飞扬七彩绚丽活泼开朗男儿情怀鹰傲苍穹共看流星风雨同行我心永远天长地久幸福快乐春意盎然喜乐安康心想事成周年庆指尖上的流年舞会之星情人节花潮管理

    发表于 2025-11-4 19:46 | 显示全部楼层
    这个有趣得紧!
    回复 支持 反对

    使用道具 举报

  • TA的每日心情
    开心
    2025-11-30 07:59
  • 签到天数: 634 天

    [LV.9]以坛为家II

    1368

    主题

    7万

    回帖

    14万

    积分

    管理员

    Rank: 9Rank: 9Rank: 9Rank: 9Rank: 9Rank: 9Rank: 9Rank: 9Rank: 9

    花潮帅哥多彩人生海样胸怀春风拂面青草情怀心曲飞扬七彩绚丽活泼开朗男儿情怀鹰傲苍穹共看流星风雨同行我心永远天长地久幸福快乐春意盎然喜乐安康心想事成周年庆指尖上的流年舞会之星情人节花潮管理

    发表于 2025-11-4 19:47 | 显示全部楼层
    研究辛苦了
    回复 支持 反对

    使用道具 举报

  • TA的每日心情
    慵懒
    2025-11-30 07:45
  • 签到天数: 1655 天

    [LV.Master]伴坛终老

    3024

    主题

    13万

    回帖

    28万

    积分

    管理员

    Rank: 9Rank: 9Rank: 9Rank: 9Rank: 9Rank: 9Rank: 9Rank: 9Rank: 9

    花潮帅哥鼠牛虎兔龙蛇马羊猴鸡狗猪多彩人生星月交辉奔放热烈海样胸怀春风拂面火热情怀优雅迷人神秘浪漫相遇之美鹰傲苍穹花好月圆紫色情节飞龙在天王者至尊大将风范音画大师天籁妙音共看流星风雨同行我心永远幸福快乐喜乐安康侠骨柔肠心想事成开朗大方花潮管理

     楼主| 发表于 2025-11-4 20:24 | 显示全部楼层

    学习
    回复 支持 反对

    使用道具 举报

  • TA的每日心情
    慵懒
    2025-11-30 07:45
  • 签到天数: 1655 天

    [LV.Master]伴坛终老

    3024

    主题

    13万

    回帖

    28万

    积分

    管理员

    Rank: 9Rank: 9Rank: 9Rank: 9Rank: 9Rank: 9Rank: 9Rank: 9Rank: 9

    花潮帅哥鼠牛虎兔龙蛇马羊猴鸡狗猪多彩人生星月交辉奔放热烈海样胸怀春风拂面火热情怀优雅迷人神秘浪漫相遇之美鹰傲苍穹花好月圆紫色情节飞龙在天王者至尊大将风范音画大师天籁妙音共看流星风雨同行我心永远幸福快乐喜乐安康侠骨柔肠心想事成开朗大方花潮管理

     楼主| 发表于 2025-11-4 20:24 | 显示全部楼层

    css3还在迭代
    回复 支持 反对

    使用道具 举报

  • TA的每日心情
    慵懒
    2025-11-30 07:45
  • 签到天数: 1655 天

    [LV.Master]伴坛终老

    3024

    主题

    13万

    回帖

    28万

    积分

    管理员

    Rank: 9Rank: 9Rank: 9Rank: 9Rank: 9Rank: 9Rank: 9Rank: 9Rank: 9

    花潮帅哥鼠牛虎兔龙蛇马羊猴鸡狗猪多彩人生星月交辉奔放热烈海样胸怀春风拂面火热情怀优雅迷人神秘浪漫相遇之美鹰傲苍穹花好月圆紫色情节飞龙在天王者至尊大将风范音画大师天籁妙音共看流星风雨同行我心永远幸福快乐喜乐安康侠骨柔肠心想事成开朗大方花潮管理

     楼主| 发表于 2025-11-4 20:25 | 显示全部楼层
    杨帆 发表于 2025-11-4 16:36
    对CSS Transform 新增独立属性scale、translate、rotate

    马老师与时俱进、化难为易、深入浅出地进行了直 ...

    回复 支持 反对

    使用道具 举报

  • TA的每日心情
    开心
    2019-11-25 21:11
  • 签到天数: 1 天

    [LV.1]初来乍到

    1420

    主题

    6万

    回帖

    12万

    积分

    管理员

    Rank: 9Rank: 9Rank: 9Rank: 9Rank: 9Rank: 9Rank: 9Rank: 9Rank: 9

    花潮美女多彩人生星月交辉奔放热烈海样胸怀春风拂面火热情怀优雅迷人神秘浪漫缤纷心情草莓情怀青草情怀蝴蝶情怀心曲飞扬星星情怀七彩绚丽活泼开朗女儿情怀男儿情怀鹰傲苍穹心香一瓣音画大师天籁妙音风雨同行我心永远喜乐安康中秋征文指尖上的流年花潮管理

    发表于 2025-11-4 22:01 | 显示全部楼层
    预览看了效果,黑黑真的无所不能
    回复 支持 反对

    使用道具 举报

  • TA的每日心情
    慵懒
    2025-11-30 07:45
  • 签到天数: 1655 天

    [LV.Master]伴坛终老

    3024

    主题

    13万

    回帖

    28万

    积分

    管理员

    Rank: 9Rank: 9Rank: 9Rank: 9Rank: 9Rank: 9Rank: 9Rank: 9Rank: 9

    花潮帅哥鼠牛虎兔龙蛇马羊猴鸡狗猪多彩人生星月交辉奔放热烈海样胸怀春风拂面火热情怀优雅迷人神秘浪漫相遇之美鹰傲苍穹花好月圆紫色情节飞龙在天王者至尊大将风范音画大师天籁妙音共看流星风雨同行我心永远幸福快乐喜乐安康侠骨柔肠心想事成开朗大方花潮管理

     楼主| 发表于 2025-11-4 22:35 | 显示全部楼层
    小辣椒 发表于 2025-11-4 22:01
    预览看了效果,黑黑真的无所不能

    果酱果酱
    回复 支持 反对

    使用道具 举报

  • TA的每日心情
    开心
    2025-11-17 10:56
  • 签到天数: 1050 天

    [LV.10]以坛为家III

    1881

    主题

    32万

    回帖

    37万

    积分

    管理员

    Rank: 9Rank: 9Rank: 9Rank: 9Rank: 9Rank: 9Rank: 9Rank: 9Rank: 9

    花潮美女虎龙狗猪多彩人生星月交辉海样胸怀火热情怀优雅迷人神秘浪漫缤纷心情草莓情怀蝴蝶情怀心曲飞扬星星情怀七彩绚丽活泼开朗女儿情怀相遇之美一往情深花好月圆心香一瓣紫色情节飞龙在天金剪刀天籁妙音妙笔生花风雨同行我心永远天长地久幸福快乐绚丽缤纷喜乐安康中秋征文周年庆指尖上的流年舞会之星分析(喊冤)章总结章杀人王小强章最佳杀刺临屏写诗七夕诗钟活动第五届风云第六届风云情人节花潮管理

    发表于 2025-11-5 11:36 | 显示全部楼层
    也就是因为封装里设置了 transform 转换属性下的函数,所以再设置是有问题的,但是可以直接使用css允许的 scale、rotate、translate 属性,这样就不冲突了。是这样理解吧
     
    回复 支持 反对

    使用道具 举报

  • TA的每日心情
    开心
    2025-11-17 10:56
  • 签到天数: 1050 天

    [LV.10]以坛为家III

    1881

    主题

    32万

    回帖

    37万

    积分

    管理员

    Rank: 9Rank: 9Rank: 9Rank: 9Rank: 9Rank: 9Rank: 9Rank: 9Rank: 9

    花潮美女虎龙狗猪多彩人生星月交辉海样胸怀火热情怀优雅迷人神秘浪漫缤纷心情草莓情怀蝴蝶情怀心曲飞扬星星情怀七彩绚丽活泼开朗女儿情怀相遇之美一往情深花好月圆心香一瓣紫色情节飞龙在天金剪刀天籁妙音妙笔生花风雨同行我心永远天长地久幸福快乐绚丽缤纷喜乐安康中秋征文周年庆指尖上的流年舞会之星分析(喊冤)章总结章杀人王小强章最佳杀刺临屏写诗七夕诗钟活动第五届风云第六届风云情人节花潮管理

    发表于 2025-11-5 11:37 | 显示全部楼层
    我评分用光了,没法加分了,不好意思,等攒出来再加了
     
    回复 支持 反对

    使用道具 举报

  • TA的每日心情
    慵懒
    2025-11-30 07:45
  • 签到天数: 1655 天

    [LV.Master]伴坛终老

    3024

    主题

    13万

    回帖

    28万

    积分

    管理员

    Rank: 9Rank: 9Rank: 9Rank: 9Rank: 9Rank: 9Rank: 9Rank: 9Rank: 9

    花潮帅哥鼠牛虎兔龙蛇马羊猴鸡狗猪多彩人生星月交辉奔放热烈海样胸怀春风拂面火热情怀优雅迷人神秘浪漫相遇之美鹰傲苍穹花好月圆紫色情节飞龙在天王者至尊大将风范音画大师天籁妙音共看流星风雨同行我心永远幸福快乐喜乐安康侠骨柔肠心想事成开朗大方花潮管理

     楼主| 发表于 2025-11-5 11:54 | 显示全部楼层
    红影 发表于 2025-11-5 11:37
    我评分用光了,没法加分了,不好意思,等攒出来再加了

    这个没关系,不用介意的
    回复 支持 反对

    使用道具 举报

  • TA的每日心情
    慵懒
    2025-11-30 07:45
  • 签到天数: 1655 天

    [LV.Master]伴坛终老

    3024

    主题

    13万

    回帖

    28万

    积分

    管理员

    Rank: 9Rank: 9Rank: 9Rank: 9Rank: 9Rank: 9Rank: 9Rank: 9Rank: 9

    花潮帅哥鼠牛虎兔龙蛇马羊猴鸡狗猪多彩人生星月交辉奔放热烈海样胸怀春风拂面火热情怀优雅迷人神秘浪漫相遇之美鹰傲苍穹花好月圆紫色情节飞龙在天王者至尊大将风范音画大师天籁妙音共看流星风雨同行我心永远幸福快乐喜乐安康侠骨柔肠心想事成开朗大方花潮管理

     楼主| 发表于 2025-11-5 11:55 | 显示全部楼层
    红影 发表于 2025-11-5 11:36
    也就是因为封装里设置了 transform 转换属性下的函数,所以再设置是有问题的,但是可以直接使用css允许的 s ...

    是的
    回复 支持 反对

    使用道具 举报

    您需要登录后才可以回帖 登录 | 立即注册

    本版积分规则

    小黑屋|手机版|Archiver|服务支持:DZ动力|huachaowang.com Inc. ( 蜀ICP备17032287号-1 )

    GMT+8, 2025-11-30 14:28 , Processed in 0.089197 second(s), 27 queries .

    Powered by Discuz! X3.4

    © 2001-2013 Comsenz Inc.

    快速回复 返回顶部 返回列表