[꿀팁시리즈] CSS3 Generator

css를 사용하다보면 종종 떠오르지 않아서 이 상황에서는 어떻게 해야 했지? 싶은 경우가 있을 것이다.

이 경우 다음 사이트에서 원하는 대로 설정 후 나오는 CSS를 가져다 쓰면 된다.

<!DOCTYPE html>
<html>
    <head>
        <title>CSS3 Property Basic</title>
        <style>
            .box{
                width : 100px;
                height: 100px;
                background-color: #2ecc71;
                -moz-transform: scale(1) rotate(30deg) translateX(30px) translateY(30px) skewX(30deg) skewY(30deg);
                -webkit-transform: scale(1) rotate(30deg) translateX(30px) translateY(30px) skewX(30deg) skewY(30deg);
                -o-transform: scale(1) rotate(30deg) translateX(30px) translateY(30px) skewX(30deg) skewY(30deg);
                -ms-transform: scale(1) rotate(30deg) translateX(30px) translateY(30px) skewX(30deg) skewY(30deg);
                transform: scale(1) rotate(30deg) translateX(30px) translateY(30px) skewX(30deg) skewY(30deg);
            }
            
        </style>
    </head>
    <body>
        <h1>Lorem ipsum dolor amet</h1>
        <div class = "box"></div>
    </body>
</html>

카테고리LifeHacking

답글 남기기 응답 취소