转换

最新推荐文章于 2023-12-02 15:30:00 发布

人心善变CTE

最新推荐文章于 2023-12-02 15:30:00 发布

阅读量126

点赞数

本文链接：https://blog.csdn.net/rxsb_12/article/details/115456917

版权

这篇博客介绍了如何使用CSS实现一个盒子在鼠标悬停时进行水平和垂直方向的位移效果。通过示例代码展示了transition和transform属性的应用，特别是transform的translate函数，用于控制元素的位置变化。

摘要由CSDN通过智能技术生成

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<title>转换</title>
		<style type="text/css">
			.box1{
				width:200px;
				height:200px;
				background-color:pink;
				transition:all .3s linear;
				
			}
			.box1:hover{
				/* transition:转换 */
				/* translatex():水平方向位移;
				translatey():垂直方向位移;
				translate(x,y):水平方向位移x,垂直方向位移y; */
				transform:translate(500px,300px); 
			}
		</style>
	</head>
	<body>
		<div class="box1"></div>
	</body>
</html>

`````