CSS3 2D 转换介绍

CSS3 中的 2D 转换(2D Transforms)允许你在二维平面上对元素进行操作,如移动、旋转、缩放和倾斜等,这可以让网页的布局和动画效果更加丰富多样。以下是一些主要的 2D 转换方法:

一、translate(移动)

语法:transform: translate(x,y);或者transform: translateX(x);和transform: translateY(y);。其中x和y是长度值(可以是像素px、百分比%等)。例如,translate(50px, 100px)会将元素在水平方向(x 轴)移动 50 像素,在垂直方向(y 轴)移动 100 像素。而translateX(30%)会将元素在水平方向按照自身宽度的 30% 进行移动。

示例:

html 复制代码
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <style>
       .box {
            width: 100px;
            height: 100px;
            background - color: blue;
            transform: translate(50px, 50px);
        }
    </style>
</head>
<body>
    <div class="box"></div>
</body>
</html>

在这个例子中,蓝色方块会在原来位置的基础上向右移动 50 像素并且向下移动 50 像素。

二、rotate(旋转)

语法:transform: rotate(angle);,其中angle是旋转的角度,单位可以是deg(度)。例如,rotate(45deg)会将元素顺时针旋转 45 度。如果要逆时针旋转,可以使用负数角度,如rotate(-30deg)。

示例:

html 复制代码
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <style>
       .box {
            width: 100px;
            height: 100px;
            background - color: green;
            transform: rotate(30deg);
        }
    </style>
</head>
<body>
    <div class="box"></div>
</body>
</html>

三、scale(缩放)

语法:transform: scale(x,y);或者transform: scaleX(x);和transform: scaleY(y);。x和y是缩放比例因子,是无单位的数字。例如,scale(2,1.5)会将元素在水平方向(x 轴)放大 2 倍,在垂直方向(y 轴)放大 1.5 倍。scale(0.5)等同于scale(0.5,0.5),会将元素缩小为原来的一半。

html 复制代码
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <style>
       .box {
            width: 100px;
            height: 100px;
            background - color: red;
            transform: scale(1.2,1.2);
        }
    </style>
</head>
<body>
    <div class="box"></div>
</body>
</html>

四、skew(倾斜)

语法:transform: skew(x - angle,y - angle);或者transform: skewX(x - angle);和transform: skewY(y - angle);。x - angle和y - angle是倾斜的角度,单位是deg。例如,skew(30deg, 10deg)会使元素在水平方向倾斜 30 度,在垂直方向倾斜 10 度。

示例:

html 复制代码
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <style>
       .box {
            width: 100px;
            height: 100px;
            background - color: yellow;
            transform: skew(20deg,0);
        }
    </style>
</head>
<body>
    <div class="box"></div>
</body>
</html>

黄色方块会在水平方向倾斜 20 度。

这些 2D 转换方法可以单独使用,也可以组合使用。例如,transform: translate(50px, 50px) rotate(30deg);会先将元素移动,然后再进行旋转。并且,这些转换是基于元素的自身坐标系统进行的,它们不会影响文档流中其他元素的位置(除非元素因为转换而脱离了文档流)。

相关推荐
destinying几秒前
vite学习笔记
前端·javascript
LRH2 分钟前
JS基础 - 手写数组扁平化函数
前端·javascript
共享ui设计和前端开发人才5 分钟前
UI前端与数字孪生结合探索:智慧建筑的能耗管理与优化
前端·ui·状态模式
FogLetter5 分钟前
从零到一实现流式输出:SSE技术在前端应用中的魔法时刻
前端·javascript
薄荷糖丶6 分钟前
一些关于CSS动画的领悟
前端
用户8168694747257 分钟前
基于Generator的async/await实现机制
前端
Cache技术分享10 分钟前
124. Java 泛型 - 有界类型参数
前端·后端
LuckySusu18 分钟前
【CSS篇】对position: sticky定位的深入理解
前端·css
JarvanMo23 分钟前
移动端应用代码审查:资深工程师提升质量与效率指南
前端
Gazer_S25 分钟前
【公司环境下发布个人NPM包完整教程】
前端·npm·node.js