Dears,
I am learning the CSS in the web and is a beginner. I found one program somewhere in the web and I cannot understand it: (it is used to demonstrate the difference in different origin case.)
<!DOCTYPE html>
<html>
<head>
<style>
div{
height: 100px;
width: 400px;
border: 5px dotted violet;
font-size: 20px;
}
.shell {
margin: 100px;
background-color: cyan;
}
.rect {
background: rgba(248, 246, 101, 0.5);
transform: rotate(35deg);
transform-origin: 5% 2%;
}
.shell1 {
margin-left: 500px;
background-color: cyan;
}
.rect1 {
background: rgba(26, 223, 26, 0.5);
transform: rotate(45deg);
transform-origin: 5% 2%;
}
</style>
</head>
<body>
<div class="shell"> transform-origin: 5% 2%;
<div class="rect"></div>
</div>
<div class="shell1"> transform-origin: 100px 200px;
<div class="rect1"></div>
</div>
</body>
</html>
My question is :
-
I want to visualize the transform-origin location in the above two cases, what codes should i add?
-
In my understanding, the % is refer to the element itself, in this case it is 400px width and 100px height, and in the above program it mentioned the origin is 5% 2%, so is it mean 400 * 0.05 px = 20px offset from the y-axis and 100 * 0.02 = 2px offset from the x-axis?. If so, then the transform origin is 20px 2px, but it seems not….
-
In the above program, it seems tell you that using transform-origin 5% 2% is same as 100px 200px, i get confuse. and he is using two rotating angle, one is 35 deg, the another is 45 deg, why?
Thanks.
