[PROGRAMMING] 프로그래밍 (Programming) - 이미지 변환(Image Transform) 01

코드 

· HTML, CSS(SCSS), 자바스크립트(Javascript)

기능

· 마우스 커서 움직임에 따라 이미지를 좌,우 또는 상,하 이미지 회전 효과

 

Output

Output

 1. HTML & CSS

main

1) 코드 뷰

<main id="main-body">

    <section class="container flex-align-center flex-column" id="example"> 

        <article class="content" name="example">

            <figure class="ct-img" id="target" data-rt-type="x">

                <img class="img-main" src="resource/example-01.jpg" decoding="async" loading="lazy" />

            </figure>

        </article>

    </section>

</main>

· figure#target 데이터 "data-rt-type" 은 좌,우 또는 상,하 회전 결정 ( x | y )

#example > .content[name="example"] 
{
  height: 100vh;
  display: -webkit-box;
  display: -moz-box;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  -webkit-align-items: center;
  align-items: center;
  -moz-box-align: center;
  -webkit-box-align: center;
  -ms-flex-align: center; 
}

#example > .content[name="example"] .ct-img#target 
{
  display: block;
  overflow: visible;
  display: -webkit-box;
  display: -moz-box;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  -webkit-justify-content: center;
  justify-content: center;
  -webkit-box-pack: center;
  -moz-box-pack: center;
  -ms-flex-box: center; 
}
#example > .content[name="example"] .ct-img#target > img.img-main 
{
  width: 640px;
  max-width: 640px;
  height: auto;
  -o-transform-origin: center;
  -ms-transform-origin: center;
  -moz-transform-origin: center;
  -webkit-transform-origin: center;
  transform-origin: center;
  -o-transform-style: preserve-3d;
  -ms-transform-style: preserve-3d;
  -moz-transform-style: preserve-3d;
  -webkit-transform-style: preserve-3d;
  transform-style: preserve-3d;
  -o-transition: all 300ms 0ms ease-in;
  -ms-transition: all 300ms 0ms ease-in;
  -moz-transition: all 300ms 0ms ease-in;
  -webkit-transition: all 300ms 0ms ease-in;
  transition: all 300ms 0ms ease-in;
  -webkit-box-reflect: below 0px linear-gradient(to bottom, transparent 0%, transparent 50%, transparent, #000); 
}
#example > .content[name="example"] .ct-img#target[data-rt="rt-left"] > .img-main 
{
  -o-transform: perspective(1280px) rotateY(-45deg);
  -ms-transform: perspective(1280px) rotateY(-45deg);
  -moz-transform: perspective(1280px) rotateY(-45deg);
  -webkit-transform: perspective(1280px) rotateY(-45deg);
  transform: perspective(1280px) rotateY(-45deg); 
}
#example > .content[name="example"] .ct-img#target[data-rt="rt-right"] > .img-main 
{
  -o-transform: perspective(1280px) rotateY(45deg);
  -ms-transform: perspective(1280px) rotateY(45deg);
  -moz-transform: perspective(1280px) rotateY(45deg);
  -webkit-transform: perspective(1280px) rotateY(45deg);
  transform: perspective(1280px) rotateY(45deg); 
}
#example > .content[name="example"] .ct-img#target[data-rt="rt-top"] > .img-main 
{
  -o-transform: perspective(1280px) rotateX(-45deg);
  -ms-transform: perspective(1280px) rotateX(-45deg);
  -moz-transform: perspective(1280px) rotateX(-45deg);
  -webkit-transform: perspective(1280px) rotateX(-45deg);
  transform: perspective(1280px) rotateX(-45deg); 
}
#example > .content[name="example"] .ct-img#target[data-rt="rt-bottom"] > .img-main 
{
  -o-transform: perspective(1280px) rotateX(45deg);
  -ms-transform: perspective(1280px) rotateX(45deg);
  -moz-transform: perspective(1280px) rotateX(45deg);
  -webkit-transform: perspective(1280px) rotateX(45deg);
  transform: perspective(1280px) rotateX(45deg); 
}

· figure#target 데이터 "data-rt" 값에 따라 CSS 코드 적용 ( rt-left | rt-right | rt-top | rt-bottom )

· -webkit-box-reflect : 이미지 반사 (파이어폭스, IE 11 이하 지원하지 않음)

· figure#target > img.img-main 'transform-origin' (기준점) 및 'transform-style' preserve-3d 적용

 

2) 노드 뷰

· main > section.container#example > article[name="example"] > figure.ct-img#target > img.img-main

main > section.container#example

#example > article[name="example"]

#example > article[name="example"] > figure.ct-img#target

figure.ct-img#target > img.img-main

2. 자바스크립트 

· figure.ct-img 노드 이벤트 바인드 (mouseenter, mouseleave, mousemove)

· 이미지 (img.img-main) - CSS 제어 

 

1) 코드 뷰 

· figure.ct-img :: mouseenter (마우스 커서 진입)

① this 는 figure.ct-img#target

② data-cen-x, data-cen-y : 이미지 중심 좌표 (x,y)

// figure.ct-img : event "mouseenter"
function ex_target_mouseenter (e) 
{
    // 메인 이미지 : img-main 
    var mimg = this.querySelector( ".img-main" );

    // 이미지 중심 좌표 ( center x, y )
    var [cenx, ceny] = [ mimg.width / 2 , mimg.height / 2]; // ES6 
    
    // 메인 이미지 컨테이너(타겟) - 데이터 변경
    this.setAttribute("data-cen-x", cenx);
    this.setAttribute("data-cen-y", ceny);
}

· figure.ct-img :: mouseleave (마우스 커서 떠남)

① this 는 figure.ct-img#target

② data-rt 초기화 - 이미지 회전 0deg (원상복구)

// figure.ct-img : event "mouseleave"
function ex_target_mouseleave (e) 
{
    this.setAttribute("data-rt", null);
}

· figure.ct-img :: mousemove (마우스 커서 움직임)

① this 는 figure.ct-img#target

② this[data-rt-type] 값에 따라 마우스 커서 좌표(mx, my)를 사용하여 좌,우 또는 상,하 data-rt 값 적용 (CSS 적용)

// figure.ct-img : event "mousemove"
function ex_target_mousemove (e) 
{
    // 회전 타입 (rotate type)
    var type = this.dataset['rtType']; // x | y 
    
    // 회전(rotate)
    var rt = ""; 

    // 이미지 중심 좌표 ( center x, y )
    var [cenx, ceny] = [ parseInt(this.dataset["cenX"]), parseInt(this.dataset["cenY"])]; // ES6 

    // 오프셋 Object.prototype.getBoundingClientRect() 
    var offset = this.getBoundingClientRect();
    var left = offset.left + getScrollX();   
    var top = offset.top + getScrollY();   
        
    // mouse point position x
    if ( type == "x" )
    {
        var mx = e.pageX - left;    
        if ( cenx > mx ) rt = "rt-left"; // rotateX (-45deg)
        else if ( cenx < mx ) rt = "rt-right"; // rotateX (45deg)
    }
    else 
    {
        // mouse point position y
        var my = e.pageY - top;

        if ( ceny > my ) rt = "rt-top"; // rotateY (-45deg)
        else if ( ceny < my ) rt = "rt-bottom"; // rotateY (45deg)
    }

    this.setAttribute("data-rt", rt);
       
    // 메인 이미지 : img-main 
    var mimg = this.querySelector( ".img-main" );
}