HTML CSS动画实现图片过渡与变换
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Image Transition and Transform</title>
<style>
.container {
perspective: 1000px;
}
.image {
width: 300px;
height: 200px;
margin: 50px;
transition: transform 1s ease-in-out;
}
.image:hover {
transform: rotateY(180deg);
}
</style>
</head>
<body>
<div class="container">
<img class="image" src="path_to_image.jpg" alt="Image Description">
</div>
</body>
</html>这个简单的HTML和CSS代码示例展示了如何在鼠标悬停时使用CSS的transition和transform属性来实现图片的过渡和旋转变化。当用户将鼠标悬停在图片上时，图片将旋转180度。这是一个基本的交互动画示例，展示了如何通过简单的CSS样式增强静态网页的表现力。
评论已关闭