css3 3D变换

Question

我有一个三角形，我需要它围绕左下角的三角形角度旋转 360 度。我需要固定这个点，让三角形围绕它旋转。

这是我的代码

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);
}

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

我需要它从静态原点旋转 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>