css3 アニメーション、アニメーションの基点を設定_html/css_WEB-ITnose

@-webkit-keyframes スイング {
50% {
-webkit-transform:回転(10度);
transform: 回転(10度);
}
100％ {
-webki t-transform: 回転(- 10deg）;
変換：回転（-10deg）;
}
}

@keyframes swing {
50％{
-webkit-transform：rote（10deg）;変換: 回転(10度);
}
100% {
-webkit-transform: 回転(-10度);
-ms-transform: 回転(-10度);
変換: 回転(-10度);
}
}


调用アニメーション画

.swing {

-webkit-transform-origin: center center;

-ms-transform-origin: center center;

transform-origin: center center;
-webkit-animation-name: spring;
アニメーション名: スイング;


}

変換原点用に配置回転转元素の基点、左上 右下 %、

详情查看h ttp://www.w3school.com.cn/cssref/ pr_transform-origin.asp

の効果は次の図のように、ベースポイントを中心にボトル子が左右に動きます。