<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<style>
div {
position: relative;
margin: 100px auto;
width: 400px;
height: 400px;
background-color: skyblue;
transition: all 1s;
}
/* 1.transform定义2d转换 */
/* div:hover {
transform: translate(1000px, 200px)
transform: translateX(1000px)
transform: translateY(200px)
} */
/* translate,位移,x轴,y轴,单位:px,百分比,百分比是相对于自身来说的。优点,相比于外边距,定位等移动,2d移动最大的优势就是不会影响其他元素*/
/* 2D位移之让子元素垂直水平居中 */
/* div::after {
position: absolute;
left: 50%;
top: 50%;
content: "";
width: 100px;
height: 100px;
background-color: orange;
transform: translate(-50%, -50%);
} */
/* 2.transform旋转 */
/* div:hover {
transform: rotate(360deg);
} */
/* rotate:旋转,单位deg,优点,不影响其他元素 */
/* 2D旋转之京东之下拉符号案例 */
/* div::after {
position: absolute;
right: 10px;
top: 10px;
content: "";
width: 10px;
height: 10px;
border-right: 1px solid #000;
border-bottom: 1px solid #000;
transform: rotate(45deg);
transition: all 0.6s;
}
div:hover::after {
transform: rotate(225deg);
} */
/* 3.transform放大缩小 */
div:hover {
transform: scale(0.5, 0.8)
}
/* scale,放大,缩小,单位是倍数 */
</style>
</head>
<body>
<div></div>
</body>
</html>
css之2d转换
最新推荐文章于 2024-07-14 17:53:01 发布