CODEWITHSUNDEEP
csstransform
Yahya Essam
Yahya Essam

Reputation: 1912

css3 3D transform

I have a triangle and I need it to rotate 360 deg around the bottom left triangle angle. I need this point to be fixed and just the triangle rotate around it.

here's my code

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>

I need it to rotate 360 deg from static origin and want it to be the bottom left angle of the triangle . is this possible ? thanks in advance.

Upvotes: 1

Views: 125

Answers (2)

Paweł
Paweł

Reputation: 4516

the problem is that you set .icons container's width and height as 50% which made the .icons container not square but rectangle. The SVG triangle is inscribed in square, so if you put the triangle into rectangle and centered it, there was some space between left bottom .icons corner and left bottom triangle's corner. you should specify the width and height of .icons to be the same (to make it the square) or play with width and height of background triangle.svg (don't use %) 

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>

Upvotes: 2

bob
bob

Reputation: 993

You can lock in the point of transformation by using the transform-origin property. In this case I have set the value to 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>

Upvotes: 0

Related Questions