CSS3 transform的常用属性 总结

本文总结了CSS3的transform属性,包括translate()、rotate()、transform-origin、scale()、skew()以及matrix()的使用方法。通过实例演示了它们如何影响元素的位置、旋转、缩放和倾斜,详细解释了各个属性的参数和效果。了解这些属性可以帮助前端开发者实现更丰富的网页动态效果。

摘要生成于 C知道 ,由 DeepSeek-R1 满血版支持, 前往体验 >

 transform属性值:
            

一、transform: translate();

1、translate()函数可以将元素向指定的方向移动,类似于position中的relative。可以把元素从原来的位置移动,而不影响在X、Y轴上的任何Web组件。
2、translate()的括号内包含两个值,分别为相对于元素原有位置在水平方向和垂直方向的偏移值。
3、向下、向右为正方向
4、如果只想在x轴或者y轴上进行变换,那么属性为translateX(n)和translateY(n)


下面这段代码就是让一个盒子平移并对比不会影响其他的盒子能够真切的显示出translate()不会影响周围其他元素

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style>
        div{width: 100px;height: 100px;}
        div:nth-child(1) {background: #00ff00;transform: translate(0, 0);transition: transform 2s linear;}
        div:nth-child(2){background: #ff0000;}
        div:nth-child(1):hover {transform: translate(100px, 100px)}
    &
评论 1
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值