css3 3D変換

Question

私は三角形を持っており、左下の三角形の周りを360度回転する必要があります。私はこの点を固定し、三角形だけを回転させる必要があります。

は、ここで私は、静的な原点から360度を回転させることが必要で、それが三角形の左下角になりたい私のコード

figure { 
 
    background-color:#000; 
 
\t position: relative; 
 
\t overflow:hidden; 
 
\t margin: 20px 1%; 
 
\t height: 200px; 
 
\t text-align: center; 
 
\t cursor: pointer; 
 
} 
 

 

 
.icons { 
 
\t position: absolute; 
 
\t top:0; 
 
\t left:20%; 
 
\t width: 50%; 
 
\t height: 50%; 
 
\t background: url("http://imgh.us/triangle_6.svg") no-repeat center center; 
 
\t background-size: 100% 100%; 
 
\t content: ''; 
 
\t -webkit-transition: -webkit-transform 0.45s; 
 
\t transition: transform 0.45s; 
 
\t -webkit-transform: rotate3d(0,0,1,0deg); 
 
\t transform: rotate3d(0,0,1,0deg); 
 
\t -webkit-transform-origin: 0 100%; 
 
\t transform-origin: bottom left; 
 
} 
 

 
figure:hover .icons{ 
 
\t -webkit-transform: rotate3d(0,0,1,360deg); 
 
\t transform: rotate3d(0,0,1,360deg); 
 
}

<figure> 
 
<div class="icons"> 
 
</div> 
 
</figure>

です。 これは可能ですか？ありがとうございます。

Answer 1

問題は、正方形が、長方形ではない.iconsコンテナを作った50％として.iconsコンテナの幅と高さを設定することです。 SVG三角形は四角形で刻まれているので、三角形を四角形にして中央に置くと、左下の.iconsコーナーと左下三角のコーナーの間にいくらかのスペースがあります。あなたは

figure { 
 
    background-color:#000; 
 
\t position: relative; 
 
\t overflow:hidden; 
 
\t margin: 20px 1%; 
 
\t height: 200px; 
 
\t text-align: center; 
 
\t cursor: pointer; 
 
} 
 

 

 
.icons { 
 
\t position: absolute; 
 
\t top:0; 
 
\t left:20%; 
 
\t width: 50%; 
 
\t height: 50%; 
 
\t background: url("http://imgh.us/triangle_6.svg") no-repeat left bottom; 
 
\t background-size: auto auto; 
 
\t content: ''; 
 
\t -webkit-transition: -webkit-transform 0.45s; 
 
\t transition: transform 0.45s; 
 
\t -webkit-transform: rotate3d(0,0,1,0deg); 
 
\t transform: rotate3d(0,0,1,0deg); 
 
\t -webkit-transform-origin: 0 100%; 
 
\t transform-origin: bottom left; 
 
} 
 

 
figure:hover .icons{ 
 
\t -webkit-transform: rotate3d(0,0,1,360deg); 
 
\t transform: rotate3d(0,0,1,360deg); 
 
}

<figure> 
 
<div class="icons"> 
 
</div> 
 
</figure>

（％を使用していない）同じであること（それ平方作るため）や背景triangle.svgの幅と高さと遊ぶために.iconsの幅と高さを指定する必要があります

Answer 2

transform-originプロパティを使用して変換ポイントをロックすることができます。この場合、値はbottom leftに設定されています。

.box { 
 
    height: 200px; 
 
    width: 200px; 
 
    position: relative; 
 
    border:1px solid black; 
 
} 
 

 
.rotate { 
 
\t height: 100px; 
 
\t width: 100px; 
 
\t background-color: green; 
 
\t position: absolute; 
 
    right:0; 
 
    transition: all 1s linear; 
 
    -webkit-transform-origin: bottom left; 
 
    
 
} 
 

 
.box:hover .rotate { 
 
\t transform: rotate(360deg); 
 
\t transform-origin: bottom left; 
 
}

<div class="box"> 
 
\t <div class="rotate"></div> 
 
</div>