此示例使用 HTML + Canvas 實現滑動拼圖驗證碼。Canvas繪制帶隨機缺口的背景，獨立滑塊按鈕監聽滑鼠/觸摸拖拽，實時將滑塊位置映射到Ca...
html圖片旋轉怎麼設置代碼示例演示
雲端運算與程式碼
2023年05月21日 00:02 1.6K+
訪客
以下是一個簡單的html圖片旋轉怎麼設置代碼，以及 HTML 圖片旋轉的代碼示例以及代碼元素解釋：
<!DOCTYPE html>
<html>
<head>
<title>圖片旋轉</title>
<style>
/* 設置圖片容器 */
.image-wrapper {
width: 400px;
height: 400px;
perspective: 800px;
}
/* 設置圖片樣式 */
.image {
width: 100%;
height: 100%;
object-fit: contain;
transform-style: preserve-3d;
transition: transform 1s;
}
/* 設置滑鼠經過容器時的旋轉效果 */
.image-wrapper:hover .image {
transform: rotateY(180deg);
}
</style>
</head>
<body>
<div class="image-wrapper">
<img class="image" src="https://mippu.qunapu.com/upload/2023/05/20230521000021168459842147829.png">
</div>
</body>
</html>代碼解釋：
- `perspective` 屬性設置視距，是讓 3D 元素更真實的一個重要屬性。
- `transform-style` 屬性設置為 `preserve-3d` 表示子元素可以保留 3D 的效果。
- `transition` 屬性定義屬性變換所需要的時間，這裏定義了 1s。
- `object-fit` 屬性用於調整圖片的尺寸和比例，這裏設置為 `contain` 是讓圖片適應容器，並保持其原始比例不變。
- `.image-wrapper:hover .image` 表示當滑鼠經過圖片容器時，圖片元素的樣式會發生變化。
- `rotateY` 用於沿著 y 軸方向旋轉元素，這裏設置為 180deg 是讓圖片元素沿著 y 軸方向繞 180 度旋轉。
效果圖截圖：
標籤： html圖片旋轉怎麽設置
相關文章
