回転のCSS3 2D変換

回転のCSS3 2D変換

CSS3 2D変換

• 変換（transfrom）は、変位要素は、回転、スケーリングおよびその他の効果を達成することができるCSS3の破壊が特徴の一つであります
• 変換（transfrom）を単に修飾されるものと理解することができます
  • モバイル：transfrom
  • 回転：回転
  • スケール：スケール

ロータリ回転のCSS3 2D変換

• 2D回転は、我々は要素が二次元平面内で時計回りまたは反時計回りに回転させていることです

• 文法

• transform:rotate(度数)

• 重点
  • ルート度内部回転、単位は（例えば：度ですrotate(45deg)）
  • 角度が正、時計回りの回転である場合、角度は負、反時計回りの回転であります
  • デフォルトの回転中心点は、要素の中心点であります

• のは、画像の回転を作ろう

img {
        width: 150px;
        position: fixed;
        top: 50%;
        left: 50%;
        margin: -75px;
        transition: all 1.5s;
}

img:hover {
        transform: rotate(360deg);
 }

• 私たちは、トランジションを使用し、360の絵の時計回りの回転を完全に回転する°

2D変換の中心点

• transform-origin変換素子の中心点を設定するために使用することができます
• 文法
  • transform-origin: x y;
• 重点
  • xおよびyパラメータの後ろにスペースで区切られたことに注意してください
  • XYデフォルト変換素子中心点は、中心点（50％〜50％）であります
  • また、画素XYまたは名詞（左中央ボタン上部）に設けてもよいです
    • transform-origin: 50% 50%;等価にtransform-origin: center center;
    • transform-origin: 40px 40px;Pxのピクセルが可能
    • transform-origin: left bottom;
• 私たちはあなたをお見せしましょうtransform-origin: 40px 40px;

img {
           width: 150px;
           position: fixed;
           top: 50%;
           left: 50%;
           margin: -75px;
           transition: all 1.5s;
           transform-origin: 40px 40px;
       }

       img:hover {
           transform: rotate(360deg);
       }