.wrap { margin: 2em 3em; position: relative; border: 1px solid #ccc; height: 200px; display: inline-block; width: 200px; white-space: nowrap; } .ori, .trans { width: 150px; height: 100px; border: 1px solid #7a0006; background: #cf0009; left: 50%; top: 50px; margin-left: -75px; position: absolute; } .ori { z-index: 0; opacity: 0.1; } .trans { z-index: 10; opacity: 0.5; background-color: #1564cf; transition: transform 1s; } .matrix1:hover { transform: matrix(1, -0.3, 0, 1, 0, 0); } .matrix2:hover { transform: matrix(1, -0.5, 0.5, 1, -50, 100) }
<!DOCTYPE html> <html lang="ko"> <head></head> <body> <div class="wrap"> matrix(1, -0.3, 0, 1, 0, 0) <div class="ori"></div> <div class="trans matrix1">matrix(1, -0.3, 0, 1, 0, 0)</div> </div> <div class="wrap"> matrix(1, -0.5, 0.5, 1, -50, 100) <div class="ori"></div> <div class="trans matrix2">matrix(1, -0.5, 0.5, 1, -50, 100)</div> </div> </body> </html>