jquery图片翻转源代码

jQuery 图片翻转可以通过 CSS3 的 3D 变换来实现，结合 jQuery 的事件处理，可以创建一个简单的图片翻转效果。以下是一个基础的图片翻转源代码示例：

HTML 结构

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Image Flip</title>
<link rel="stylesheet" href="styles.css">
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<script src="script.js"></script>
</head>
<body>
<div class="flip-container">
    <div class="flipper">
        <div class="front">
            <!-- 正面图片 -->
            <img src="front-image.jpg" alt="Front">
        </div>
        <div class="back">
            <!-- 背面图片 -->
            <img src="back-image.jpg" alt="Back">
        </div>
    </div>
</div>
</body>
</html>

CSS 样式

/* styles.css */
.flip-container {
    perspective: 1000px;
    width: 300px;
    height: 300px;
    margin: 0 auto;
}

.flipper {
    position: relative;
    width: 100%;
    height: 100%;
    transform-style: preserve-3d;
    transition: transform 0.6s;
}

.flip-container:hover .flipper {
    transform: rotateY(180deg);
}

.front, .back {
    position: absolute;
    width: 100%;
    height: 100%;
    backface-visibility: hidden;
}

.front img, .back img {
    width: 100%;
    height: auto;
}

.back {
    transform: rotateY(180deg);
}

jQuery 脚本

// script.js
$(document).ready(function() {
    $('.flip-container').on('click', function() {
        $(this).find('.flipper').toggleClass('flipped');
    });
});

解释

HTML 结构：创建了一个包含正面和背面图片的容器 .flip-container。
CSS 样式：
- .flip-container 设置了透视效果，使得内部的 3D 变换看起来更自然。
- .flipper 是实际进行翻转的元素，通过 transform-style: preserve-3d; 保持子元素的 3D 空间位置。
- .front 和 .back 是正面和背面的图片容器，通过 backface-visibility: hidden; 隐藏翻转时的背面。
- 当鼠标悬停在 .flip-container 上时，.flipper 会旋转 180 度显示背面。