HTML, CSS, jQuery: 이미지 변환 팁

<style>
    .cropped-image {
        width: 300px;
        height: 200px;
        position: relative;
        overflow: hidden;
    }
    .cropped-image img {
        position: absolute;
        clip: rect(0px, 300px, 200px, 0px);
    }
</style>

<div class="cropped-image">
    <img src="image.jpg" alt="Cropped Image">
</div>

<style>
    .scaled-image img {
        transform: scale(1.5);
    }
</style>

<div class="scaled-image">
    <img src="image.jpg" alt="Scaled Image">
</div>

<style>
    .rotated-image img {
        transform: rotate(45deg);
    }
</style>

<div class="rotated-image">
    <img src="image.jpg" alt="Rotated Image">
</div>

<style>
    .skewed-image img {
        transform: skewX(20deg);
    }
    .distorted-image img {
        transform: perspective(500px) rotateY(30deg);
    }
</style>

<div class="skewed-image">
    <img src="image.jpg" alt="Skewed Image">
</div>

<div class="distorted-image">
    <img src="image.jpg" alt="Distorted Image">
</div>

<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>

<style>
    .fade-image img {
        display: none;
    }
</style>

<script>
    $(document).ready(function() {
        $(".fade-image img").fadeIn(2000);
    });
</script>

<div class="fade-image">
    <img src="image.jpg" alt="Fading Image">
</div>