CSS- 애니메이션

📆 2022-5-12

-학습내용-

애니메이션

   <style>
        .origin{width:200px; height: 134px;
                border:1px solid black; 
                margin:40px;perspective:200px;/*원근감*/}
/*이미지 이동*/
        .movex:hover{
            -webkit-transform: translateX(50px);
            -ms-transform: translateX(50px);
            -moz-transform: translateX(50px);
            -o-transform: translateX(50px);
            transform: translateX(50px);
        }  
        .movey:hover{ transform: translateY(50px);}  
        .movexy:hover{  transform: translate(10px, 20px);}
/*이미지 확대, 축소 */
        .scalex:hover{ transform: scaleX(1.5);}
        .scaley:hover{ transform: scaleY(1.5);}
        .scalexy:hover{ transform: scale(0.5,0.5);}
/* 기울임 - 각도 */
        .skewx:hover{ transform: skewX(40deg);}
        .skewy:hover{ transform: skewY(20deg);}
        .skewxy:hover{ transform: skew(30deg, -30deg);}
/*회전*/
      .rot:hover{ transform: rotate(90deg);}  
/* 3차원 */
        .rotx:hover{ transform: rotateX(45deg);}
        .roty:hover{ transform: rotateY(45deg);}
        .rotz:hover{ transform: rotateZ(45deg);}
        .rotxyz:hover{ transform: rotate3d(2.5, 1.2, -1.5, 45deg);}
    </style>

  <style>        
    .origin{width:200px; height: 134px;
            border:1px solid black; 
            margin:40px;perspective:200px;/*원근감*/}
/*  이미지 변환 시작점 지정하기 */
    .bus{transform: rotatez(10deg);}
    .ltop .bus{ transform-origin: left top;}
    .rtop .bus{ transform-origin: right top;}
    .lbottom .bus{ transform-origin: left bottom;}
    .rbottom .bus{transform-origin: right bottom;}
    </style>

hover 동적 변화 -1

   <style>
        /* 전환 프로퍼티, 전환시간 */
        span{transition: font-size 5s;}
        span:hover{ font-size: 500%}
    </style>

hover 동적 변화-2

 <style>
        div {width: 100px; height: 100px; 
            background: orange; margin-bottom: 100px;}
        .box{transition-property: width, height, background-color;
             transition-duration: 1s, 3s;}
        .box:hover { width:300px; height: 300px;
                    background-color: brown;}
        .box2{ transition-property: background-color, transform, width, height;
            transition-duration: 3s;
        }            
        .box2:hover{background-color: aquamarine;
            width: 200px; height: 200px; transform: rotate(180deg);}
    </style>

box shadow

    <style>
        div{ width: 600px; height: 250px;
            background: url('./images/book.png') no-repeat ;
            border: solid 1px #ccc;}
        #example1{ box-shadow: 5px 10px;}
        
        #example2{ box-shadow: 5px 10px #888;}
        #example3{ box-shadow: 5px 10px 10px skyblue;}
        #example4{ box-shadow: 2px 2px 2px black,
                                0  0 25px blue,
                                0 0 5px darkblue;}
        #example5{ box-shadow: 5px 5px 5px 5px gray inset;}
    </style>

박스 기울이기

  <style>
        h1{font-size: 60px;}
        div{width:200px;height: 200px;}
        .container{ border: 1px solid black;
            perspective: 300px; 
            margin-top:100px; margin-left:100px;
        float:left;}
        .box{background-color: aquamarine;
        transform: rotateY(135deg);}
        #back1{ backface-visibility: hidden;}
        #back2{ backface-visibility: visible;}
    </style>