CSS 2D 转换是一种将元素沿 X 轴或 Y 轴旋转，添加缩放因子和移动元素的技术。
以下是 CSS 2D 转换的属性：
- transform：应用 2D 转换
- transform-origin：指定转换的轴心，其默认值为中间点。
下面是一些示例：
缩放元素：
div {
transform: scale(1.5);
}旋转元素：
div {
transform: rotate(45deg);
}平移元素：
div {
transform: translate(50px, 100px);
}组合转换：
div {
transform: rotate(45deg) translate(50px, 100px) scale(1.5);
}您可以在以下示例中尝试这些代码。
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>CSS 2D 转换</title>
<style>
div{
background-color: #FFCC00;
width: 100px;
height: 100px;
margin: 20px;
}
/*缩放*/
#scale{
transform: scale(1.5);
}
/*旋转*/
#rotate{
transform: rotate(45deg);
}
/*平移*/
#translate{
transform: translate(50px, 100px);
}
/*组合转换*/
#combo{
transform: rotate(45deg) translate(50px, 100px) scale(1.5);
}
</style>
</head>
<body>
<h2>缩放</h2>
<div id="scale"></div>
<h2>旋转</h2>
<div id="rotate"></div>
<h2>平移</h2>
<div id="translate"></div>
<h2>组合转换</h2>
<div id="combo"></div>
</body>
</html> 在以上示例中，我们使用 scale、rotate、translate 和组合转换来演示了 CSS 2D 转换的属性，您可以在浏览器中查看效果。
本站文章如无特殊说明，均为本站原创，如若转载，请注明出处：CSS 2D转换 - Python技术站
微信扫一扫 
支付宝扫一扫 