몽땅뚝딱 개발자

[CSS] transform-origin 본문

Development/HTML · CSS

[CSS] transform-origin

레오나르도 다빈츠 2022. 5. 24. 08:44

◽ transform-origin

transform-origin: {세로} {가로}

ex) transform-origin: center left; 이라면 세로 기준으로 center, 가로 기준으로 left부터 정렬된다.

const BarGraph = styled.div`
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    transform: scaleX(${({width}) => width / 100});
    transform-origin: center left;
    transition: transform 1.5s ease;
    height: 100%;
    background: ${({isSelected}) => isSelected ? 'rgba(126, 198, 81, 0.7)' : 'rgb(198, 198, 198)'};
    z-index: 1;
`

 

Comments