javascript – Understanding the CSS transform-origin

html - Animation after toggling doesn't apply the second style


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>
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%;
<div class="shell"> transform-origin: 5% 2%;
<div class="rect"></div>
<div class="shell1"> transform-origin: 100px 200px;
<div class="rect1"></div>

My question is :

  1. I want to visualize the transform-origin location in the above two cases, what codes should i add?

  2. 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….

  3. 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?


Source link

Leave a reply

Please enter your comment!
Please enter your name here