transform-orange属性后面的数值表示什么呀

transform-orange属性后面的数值表示什么呀

# 具体遇到的问题
transform-orange属性后面的数值表示什么呀# 报错信息的截图

# 相关课程内容截图

# 尝试过的解决思路和结果

# 粘贴全部相关代码,切记添加代码注释(请勿截图)

在这里输入代码,可通过选择【代码语言】突出显示

正在回答 回答被采纳积分+1

登陆购买课程后可参与讨论,去登陆

1回答
好帮手慕张 2020-12-08 18:10:19

同学你好,问题回答如下:

1、transform-origin:属性用于设置元素的基点位置。结合CSS3动画可以使元素沿着某一基点进行旋转、位移等。

2、transform-origin属性值可以是百分比或者是单位为em、px的值等,也可以是top、right、bottom、left和center这样的关键词。

3、下图就是为左上角为旋转基点,同学可以参照理解一下:

http://img1.sycdn.imooc.com//climg/5fcf50ec09ee535903780521.jpg

http://img1.sycdn.imooc.com//climg/5fcf50fa09d2d4ea02680235.jpg

4、如果还有哪里不理解的话,可以再具体的描述下,再次进行提问,老师会帮助你解决。

祝学习愉快!


  • 提问者 情分的小前端 #1

    如果是3d旋转的呢,视频里面不是按照中心轴吗,但这是一个点啊

    2020-12-08 18:13:14
  • 好帮手慕张 回复 提问者 情分的小前端 #2

    同学你好,问题回答如下:

    1、rotate是旋转,如果2d是一个面旋转,3d是一个空间旋转,

    2、transform-orange属性只是设置基点(就是围绕旋转的中心点),可以设置两个值x轴和y轴,也可以设置三个值x,y,z轴。如下,默认是元素的中心点。

    http://img1.sycdn.imooc.com//climg/5fd03429093d86a210330650.jpg

    3、如果加上transform-orange属性,就会改变旋转的中心点,下图为设置两个值的情况:

    http://img1.sycdn.imooc.com//climg/5fd0345409c2145c10140652.jpg

    4、下图为设置三个值的情况:

    http://img1.sycdn.imooc.com//climg/5fd0347c095a579d10230675.jpg

    5、transform-orange就是可以改变基点位置的一个属性,可以自定义基点位置,同学可以自己尝试测一下就明白了。

    祝学习愉快!


    2020-12-09 10:21:07
问题已解决,确定采纳
还有疑问,暂不采纳

恭喜解决一个难题,获得1积分~

来为老师/同学的回答评分吧

0 星
请稍等 ...
意见反馈 帮助中心 APP下载
官方微信

在线咨询

领取优惠

免费试听

领取大纲

扫描二维码,添加
你的专属老师