css3 3D变换

Question

我有一个三角形，我需要它绕左下角三角形旋转360度。我需要修复这一点，只需要三角形围绕它旋转。

这是我的代码

chars = " abcdefghijklmnopqrstuvwxyz0123456789!@#$%^&*()-_"

for char in chars:
    print(char, (chars.index(char)+3)%4 * 90)

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


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

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

我需要它从静态原点旋转360度，并希望它是三角形的左下角。 这可能吗 ？ 提前谢谢。

Answer 1

问题是你将.icons容器的宽度和高度设置为50％，这使得.icons容器不是正方形而是矩形。 SVG三角形刻有正方形，因此如果您将三角形放入矩形并使其居中，则在左下角.icons角和左下角三角形角之间存在一些空间。你应该指定.icons的宽度和高度是相同的（使其成为正方形）或使用背景triangle.svg的宽度和高度（不要使用％）

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


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

 figure:hover .icons{
	-webkit-transform: rotate3d(0,0,1,360deg);
	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 {
	height: 100px;
	width: 100px;
	background-color: green;
	position: absolute;
    right:0;
    transition: all 1s linear;
   -webkit-transform-origin: bottom left;
  
}

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

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