응용) transform-origin3

 

 

 

어제 실습의 복습,

열렸다 닫혔다

 

 

 

 

<style>

.b {
    display:block; position:relative; left:300px; top: 200px;
    width: 400px; height: 100px; border: 1px solid purple;
    font-size: 38px; font-weight: bold; 
    text-align: center; line-height: 100px; 
    transition: all 0.5s;
    }
.b:hover { color:red;}



.b:before,
.b:after {
         content:""; position: absolute; top:0;
         width:50%; height:100%; z-index: -1;
         background: purple;
         transition: transform 1s;
         transform: scaleX(0);
         }
.b:before {right: 0; transform-origin: left;}
.b:after {left: 0; transform-origin: right;}



.b:hover:before, 
.b:hover:aftet {
          transform: scaleX(1);
          }
.b:hover:before {transform-origin: left;}
.b:hover:after {transform-origin: right;}

</style>


<span class="b"> Click </span>