CSS3の角度で画像を翻訳する

Question

どのように画像をある角度で翻訳するのですか？私はtranslate関数でxとy座標を与えることができることを知っていますが、私はある点から放射状に複数の画像を変換したいので、それを対称にしたいのです。

Answer 1

css transformプロパティは、要素を操作するためのいくつかの異なるオプションを受け入れます。あなたは、あなたが3つの軸（X、Y、Z）で画像を移動することができtranslate性質を述べたように持っていますが、あなたはあなたのtransformあなたがそうのように、回転プロパティを使用することができますに角度を追加したい場合は

：

transform: rotate(15deg); 

また、3D回転のような、より複雑な回転を追加することができます。http://www.w3schools.com/cssref/css3_pr_transform.asp

：

transform: rotate3d(x,y,z,angle); /* Defines a 3D rotation */ 

は、より多くの情報のためには、上のtransformプロパティのためのマニュアルを確認することができます

Answer 2

あなたは、要素を回転させるX軸方向にそれを移動し、それがレベル

div { 
 
    width: 50px; 
 
    height: 50px; 
 
    background-color: green; 
 
    position: absolute; 
 
    left: 50px; 
 
    top: 50px; 
 
} 
 

 
div:nth-child(1) { 
 
    transform: rotate(20deg) translateX(100px) rotate(-20deg); 
 
} 
 

 
div:nth-child(2) { 
 
    transform: rotate(45deg) translateX(100px) rotate(-45deg); 
 
} 
 

 
div:nth-child(3) { 
 
    transform: rotate(70deg) translateX(100px) rotate(-70deg); 
 
}

<div>20</div> 
 
<div>45</div> 
 
<div>70</div> 
 
<div>base</div>