translate中的（90px，90px）都是以div的左上角为定点吗？

@keyframes move {

  0%{

    transform: translateY(90px);

/*我想问的是 90px 是针对整个盒子的最左上角开始算吗？ 是不是每个translate所说的方位都是以div的坐上角为起点？*/

  }

  15%{

    transform: translate(90px,90px);

  }

  30%{

    transform: translate(180px,90px);

  }

  45%{

    transform: translate(90px,90px);

  }

  60%{

    transform: translate(90px,0);

  }

  75%{

    transform: translate(90px,90px);

  }

  90%{

    transform: translate(90px,180px);

  }

  100%{

    transform: translate(90px,90px);

  }

}

鸡仔煲绿豆沙

2015-05-11

源自：十天精通CSS3 9-8

关注问题我要回答

2712

操作

收起

2 回答

慕粉1420362554
2016-10-25

<!DOCTYPE html>

<html>

<head>

<title>变形与动画</title>

/* <link href="style.css" rel="stylesheet" type="text/css"> */

<style>

@keyframes move {

0%{

transform: translateY(90px);

}

15%{

transform: translate(90px,90px);

}

30%{

transform: translate(180px,90px);

}

45%{

transform: translate(90px,90px);

}

60%{

transform: translate(90px,0);

}

75%{

transform: translate(90px,90px);

}

90%{

transform: translate(90px,180px);

}

100%{

transform: translate(90px,90px);

}

div {

width: 200px;

height: 200px;

border: 1px solid red;

margin: 20px auto;

}

span {

display: inline-block;

width: 20px;

height: 20px;

background: orange;

transform: translateY(90px);

animation-name: move;

animation-duration: 10s;

animation-timing-function: ease-in;

animation-delay: .2s;

animation-iteration-count:infinite;

animation-direction:alternate;

animation-play-state:paused;

}

div:hover span {

animation-play-state:running; /*表示鼠标移到时才运动，此时是从上次暂停的地方开始*/

}

</style>

</head>

<body>

</body>

</html>

当div的宽度为200PX，span标签宽度为20px，时

transform: translateY(90px);处于中间位置， transform: translateY(90px);这方面不懂，可以倒回去看

8.4.CSS3中的变形--位移 translate()（移动）和

8.6.CSS3中的变形--原点 transform-origin（改变中心原点）

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

收起回答

arlenhui
2015-06-23

不是，是以命名模块的左上角为坐标原点（0， 0）。

示例是-webkit-animation-name: move;在span里，所以是以span左上角为基点，Y轴向下为正值，X轴向右为正值构建坐标系。和DIV无关和命名有关。

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

收起回答

0/150

提交

取消

十天精通CSS3

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

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

进入课程

本课相似问答

2 回答transform: translateY(90px);代码的作用在哪里

1 回答感觉像是根据DIV中的内容定位

2 回答item的translate??????????

3 回答右下角向左上角应该是to top left吧，根据那个表格，那他的举例是不是错啦？

1 回答translate的-50%,-50%

搜索更多本课相关问答

translate中的（90px，90px）都是以div的左上角为定点吗？

我要回答关注问题

热搜

最近搜索清空

translate中的（90px，90px）都是以div的左上角为定点吗？

2 回答

本课相似问答

translate中的（90px，90px）都是以div的左上角为定点吗？