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

WBOY
リリース: 2016-06-24 11:37:42
オリジナル
1747 人が閲覧しました


@-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

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

関連ラベル:
ソース:php.cn
このウェブサイトの声明
この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。
人気のチュートリアル
詳細>
最新のダウンロード
詳細>
ウェブエフェクト
公式サイト
サイト素材
フロントエンドテンプレート