Jam's story

[CSS] 2D, 3D 변환 transform, translate 본문

WEB/CSS

[CSS] 2D, 3D 변환 transform, translate

애플쩀 2022. 5. 26. 16:29

[2D/3D 변환]

변환: 요소크기 조정/이동/기울기/회전 transform 속성

전환: 주어진 기간동안 속성값을 매끄럽게 변경 transition 속성

  • transition-delay 전환 연기시간 속성
  • transition-duration 지속시간 속성
  • transition-property CSS 속성
  • transition-timing-function ease 전환속도 곡선 속성
    • ease(기본값) 천천히(시작) -> 빨라 -> 천천히(종료)
    • linear 등속 (시작~종료)
    • ease-in 천천히 (시작)
    • ease-out 천천히 (종료)
    • ease-in-out 등등
  • trainsition

 

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        div{
            width: 100px;
            height: 100px;
            background: red;
            /* 주어진 시간동안 부드럽게 전환 */
            
            transition: width 2s, height 1s;
            transition-property: width;
            transition-duration: 2s;
            /* 전환할때 속도곡선 */
            transition-timing-function: ease;
            

        }
/*         너비가 100에서 마우스를 올리면 300px로 증가 
        콜론 하나는 가상클래스  
        너비변경을 부드럽게 변경=>전환*/
        div:hover{
            width: 300px;
            height: 200px;
        }

</style>
</head>
<body>
<h3>css 2D/3D 변환작업</h3>
    <h3>css전환</h3>
    <pre>전환: 주어진 기간동안 속성값을 부드럽게 변경 
        [2D/3D 변환]

        변환: 요소크기 조정/이동/기울기/회전 transform 속성
        
        전환: 주어진 기간동안 속성값을 부드럽게 변경  transition 속성
       
       1.trainsition
       2.transition-delay 전환 연기시간 속성
       3.transition-duration 지속시간 속성
       4.transition-property CSS 속성
       5.transition-timing-function ease 전환속도 곡선 속성
       
       전환효과를 만들려면 2가지 지정
       1.효과를 추가하려는 css속성
       2.효과를 지속시간 
       
        지속시간을 지정하지 않으면 기본값은 0 으로 적용 
        ease(기본값) 천천히(시작) -> 빨리 -> 천천히(종료)
        linear 등속 (시작~종료)
        ease-in 천천히 (시작)
        ease-out 천천히 (종료)
        ease-in-out 천천히 시작 ~천천히 종료 
   


    </pre>
    <div></div>
</body>
</html>

 

 

등속속도  transition-timing-function
 
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        div{
            width: 100px;
            background:red;
            margin-bottom: 3px;
            transition: width 2s ;
        }
        div:hover{
            width: 100%;
        }
        div:nth-child(1){
            /* 전환하는 작업을 2초후에 시작  */
            transition-delay: 2s;
            transition-timing-function: ease ;}
        div:nth-child(2){transition-timing-function:linear ;}
        div:nth-child(3){transition-timing-function:ease-in ;}
        div:nth-child(4){transition-timing-function:ease-out ;}
        div:nth-child(5){transition-timing-function:ease-in-out ;}
   </style>
</head>
<body>
    <div>ease(defulat)</div>
    <div>linear</div>
     <div>ease-in</div>
     <div>ease-out</div>
     <div>ease-in-out</div>
     
</body>
</html>

 

 

전환+변환 
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        div#trans{
            width: 100px;
            height: 100px;
            background-color: red;
            text-align: center;
           /* 뒤에 ease안붙여도 된다. 기본값이기 때문에  
           변환 -transform(rotate) 부드럽게 회전 
           */
            transition: width 3s ease, height 2s ease,transform 2s ;  
            
        }
        /* 의사클래스는 특정 상태를 나타낸다 . */
        div#trans:hover{
            width: 300px;
            height: 300px;
            transform: rotate(180deg);
        }
    </style>
</head>
<body>
    <h3>transition-전환+변환</h3>
    <div id="trans">box</div>
    
</body>
</html>
Document

transition-전환+변환

box

 

저작자표시 (새창열림)

'WEB > CSS' 카테고리의 다른 글

[CSS] css 애니메이션 -로딩이미지처리 ,이미지 흔들기  (0) 2022.05.27
[CSS] 애니메이션 효과  (0) 2022.05.26
[CSS] 2D 변환  (0) 2022.05.26
[CSS] 웹글꼴  (0) 2022.05.26
[CSS] 텍스트 속성  (0) 2022.05.26
'WEB/CSS' Related Articles more
Comments