응용) transform-origin 응용

 

 

 

 

1. center;  

 

 

<style>

* {padding: 0; margin:0; text-decoration: none; list-style: none}

.box { 
      position: relative; left:55%; top:300px;
      width: 200px; height: 200px; background: red;   
      transition: all 1s;
   
      transform-origin: center; 
     
     }
 
 .box:hover { transform:rotate(360deg);}
   
 .box span { 
     position:absolute; left:50%; top:50%;
     width: 5px; height: 5px; background: purple	;
     border-radius : 100%;
     transform: translate (-50%, -50%);
     }
   
</style>



<div class='box'>
<span></span>
</div>

 

 

 

 

---

 

 

 

2. right;

 

 

 

<style>
* { padding:0; margin:0; text-decoration; none; list-style: none;}

.box { position: relative; left: 70%; top: 55px;
       width: 200px; height: 200px; background: red;
       transition: all 1s;
       
       transform-origin: right;}
       
 .box:hover {transform: rotate(360deg);}
 
 .box span { position: absolute; left:100%; top:50%;
 		     width: 5px; height: 5px; background: purple;
             border-radius: 100%;
             transform: translate(-50%, -50%);}

</style>

 

 

---

 

 

3. left top +

span position 값

변경

 

 

.box {
        position: relative; left:55%; top:300px;
        width: 200px; height: 200px; background: red;
        transition: all 1s;

        transform-origin: 80% 80%;

       }

   .box:hover { transform:rotate(180deg);}

   .box span {
       position:absolute; left:80%; top:80%;
       width: 5px; height: 5px; background: purple;
       border-radius : 100%;
       transform: translate(-50%, -50%);

 

 

 

 

 

---

 

 

4. hover값을 변경

 

 

.box:hover { transform:rotateY(180deg);}