css3 3D-преобразование

Question

У меня есть треугольник, и мне нужно его вращать на 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>

мне это нужно, чтобы повернуть на 360 градусов от статического происхождения и хотим, чтобы левый нижний угол треугольника. это возможно? благодарит заранее.

Answer 1

проблема заключается в том, что вы устанавливаете ширину и высоту .icons контейнера в 50%, что делает контейнер .icons не квадрат, а прямоугольник. Треугольник SVG вписан в квадрат, поэтому, если вы поместите треугольник в прямоугольник и центрируете его, между левым нижним углом угла и левым нижним треугольником будет некоторое пространство. Вы должны указать ширину и высоту .icons быть такой же (чтобы сделать его квадрат) или играть с шириной и высотой фона triangle.svg (не используйте%)

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>

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>