当前位置：首页 > news >正文

CSS3前端入门（第三天）2D转换 transform

news 来源：原创 2025/6/1 10:56:39

转换（transform）是CSS3中具有颠覆性的特征之一，可以根据实现元素的位移、旋转、缩放等效果

移动：translate
旋转：rorate
缩放：scale

2D转换之移动translate

2D移动是2D转换里面的一种功能，可以改变元素在页面中的位置，类似定位
在这里插入图片描述

<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>移动</title><style>/* 移动盒子的位置： 定位 盒子的外边距 2d转换移动 */div {width: 200px;height: 200px;background-color: pink;/* x就是x轴上移动位置 y就是y轴上移动位置 中间用都好分隔 *//* transform: translate(x, y); */transform: translate(100px, 100px);}</style>
</head><body><div></div>
</body></html>

在这里插入图片描述

<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>移动</title><style>/* 移动盒子的位置： 定位 盒子的外边距 2d转换移动 */div {width: 200px;height: 200px;background-color: pink;/* 1.我们translate里面的参数是可以用% *//* 2.如果里面的参数是% 移动的距离是 盒子自身的宽度或者高度来比对的*//* 这里的 50% 就是 50px 因为盒子的宽度是 100px */transform: translateX(50%);}</style>
</head><body><div></div>
</body></html>

在这里插入图片描述

让一个盒子水平垂直居中

<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>让一个盒子水平垂直居中</title><style>div {position: relative;width: 500px;height: 500px;background-color: pink;}p {width: 200px;height: 200px;background-color: purple;position: absolute;top: 50%;left: 50%;/* transform: translate(-50%,-50%); 盒子往上走中间高度的一半 */transform: translate(-50%, -50%);}</style>
</head><body><div><p></p></div>
</body></html>