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);会先将元素移动,然后再进行旋转。并且,这些转换是基于元素的自身坐标系统进行的,它们不会影响文档流中其他元素的位置(除非元素因为转换而脱离了文档流)。

相关推荐
gnip7 小时前
企业级配置式表单组件封装
前端·javascript·vue.js
一只叫煤球的猫8 小时前
写代码很6,面试秒变菜鸟?不卖课,面试官视角走心探讨
前端·后端·面试
excel9 小时前
Three.js 材质(Material)详解 —— 区别、原理、场景与示例
前端
掘金安东尼9 小时前
抛弃自定义模态框:原生Dialog的实力
前端·javascript·github
hj5914_前端新手13 小时前
javascript基础- 函数中 this 指向、call、apply、bind
前端·javascript
薛定谔的算法13 小时前
低代码编辑器项目设计与实现:以JSON为核心的数据驱动架构
前端·react.js·前端框架
Hilaku13 小时前
都2025年了,我们还有必要为了兼容性,去写那么多polyfill吗?
前端·javascript·css
yangcode13 小时前
iOS 苹果内购 Storekit 2
前端
LuckySusu13 小时前
【js篇】JavaScript 原型修改 vs 重写:深入理解 constructor的指向问题
前端·javascript
LuckySusu13 小时前
【js篇】如何准确获取对象自身的属性?hasOwnProperty深度解析
前端·javascript