CSS transform 是一種很強大的工具，它可以幫助我們實現各種炫酷的效果。在這里我們介紹如何使用 CSS transform 實現放大鏡效果。

html:
<div class="zoom-box">
<img src="img/1.jpg" class="zoom-img">
<div class="zoom-lens"></div>
</div>
css:
.zoom-box {
position: relative;
width: 400px;
height: 400px;
margin: 50px auto;
}
.zoom-box .zoom-lens {
position: absolute;
width: 100px;
height: 100px;
border-radius: 50%;
border: 1px solid #ddd;
background-color: rgba(255, 255, 255, 0.6);
cursor: move;
}
.zoom-box .zoom-img {
width: 100%;
height: 100%;
display: block;
}
.zoom-box .zoom-result {
position: absolute;
width: 200px;
height: 200px;
border: 1px solid #ddd;
background: url("img/1.jpg") no-repeat;
background-size: 800px 800px;
background-position: -200px -200px;
left: 430px;
top: 50px;
}
.js:
$(function() {
var smallImgWidth = $('.zoom-img').width(); // 獲取小圖寬度
var smallImgHeight = $('.zoom-img').height(); // 獲取小圖高度
var bigImgWidth = smallImgWidth * 4; // 大圖寬度是小圖的4倍
var bigImgHeight = smallImgHeight * 4; // 大圖高度是小圖的4倍
var lensWidth = $('.zoom-lens').width();
var lensHeight = $('.zoom-lens').height();
var zoomResultWidth = $('.zoom-result').width();
var zoomResultHeight = $('.zoom-result').height();
// 小圖添加mousemove事件
$('.zoom-img').on('mousemove', function(e) {
var offsetX = e.pageX - $(this).offset().left; // 鼠標相對于小圖的X坐標
var offsetY = e.pageY - $(this).offset().top; // 鼠標相對于小圖的Y坐標
var posX = Math.max(0, Math.min(smallImgWidth - lensWidth, offsetX - lensWidth / 2)); // 計算放大鏡的X坐標
var posY = Math.max(0, Math.min(smallImgHeight - lensHeight, offsetY - lensHeight / 2)); // 計算放大鏡的Y坐標
// 更新放大鏡的位置
$('.zoom-lens').css({
left: posX,
top: posY
});
// 更新目標區域的背景圖片位置
$('.zoom-result').css({
backgroundPositionX: -posX * 2,
backgroundPositionY: -posY * 2
});
});
});

通過上述 HTML 代碼和 CSS 代碼可以實現一個帶放大鏡效果的圖片展示。當用戶鼠標移動到圖片上時，放大鏡跟隨鼠標位置移動，同時目標區域顯示放大后的圖像。