关于一半位置显示动画的问题

请问为什么一开始要在img里设置left：50%，往右移动一半，然后再设置transform: translateX(-50%);让图片居中？作用是什么？

我感觉没好处只有坏处啊？坏处就是从左至右的动画移动到一半就停一下，不连贯了。那为什么要这么设置呢？

麓鹿不迷路

2018-06-09

源自：十天精通CSS3 7-8

关注问题我要回答

1153

操作

收起

4 回答

qq_然之_0 回答被采纳 +2 积分
2018-10-19

position:absolute,left:50%后

,让它往左移足够的空间,

显示它的全部宽度,

我这里采用transform: translateX(-50%);对它进行移位、

自动设置了自己的宽度为父宽度()的一半.

0 回复有任何疑惑可以回复我~

#1

麓鹿不迷路提问者

谢谢，懂了！

2018-11-24 回复有任何疑惑可以回复我~

恰逢暮雪
2021-01-20

那是居中的一种写法。至于图片移动只有一半，你只要在动画里将left：0；补上就可以了。

0 回复有任何疑惑可以回复我~

qq_然之_0
2018-10-19

translateY(Y)仅垂直方向移动（Y轴移动）可以说是上下移动

translateX(x)仅水平方向移动（X轴移动）可以说是左右移动

translate(x,y)水平方向和垂直方向同时移动（也就是X轴和Y轴同时移动）x左右移动，y上下移动

0 回复有任何疑惑可以回复我~

qq_然之_0
2018-10-19

水平垂直居中

0 回复有任何疑惑可以回复我~

举报

0/150

提交

取消

十天精通CSS3

参与学习 242633 人
解答问题 2623 个

本课程为CSS3入门教程，深刻详解CSS3知识让网页穿上绚丽装备

本课相似问答

3 回答动画出现一半的问题

1 回答关于设置半圆的问题

1 回答关于调用动画问题

4 回答动画不显示--提醒

1 回答背景图像不显示动画结果

搜索更多本课相关问答

关于一半位置显示动画的问题

我要回答关注问题

意见反馈帮助中心 APP下载