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);
??}
}
2016-10-25
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<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>
?
<div><span></span></div>
</body>
</html>
當div的寬度為200PX，span標簽寬度為20px，時
? ??transform:?translateY(90px);處于中間位置，?transform:?translateY(90px);這方面不懂，可以倒回去看
8.4.CSS3中的變形--位移 translate()（移動）和
8.6.CSS3中的變形--原點 transform-origin（改變中心原點）
2015-06-23
不是，是以命名模塊的左上角為坐標原點（0， 0）。
示例是-webkit-animation-name: move;在span里，所以是以span左上角為基點，Y軸向下為正值，X軸向右為正值構建坐標系。和DIV無關和命名有關。