CSS3 2D

介绍两个关于2D 的属性:

  1. 2D 转换属性transform 这个属性的重要的两个方法基础使用
    设置了两个简单的父子关系的div
    建立两个父子关系的div块元素
    为两个div设置简单样式
    为div设置简单的样式然后生成如下的样式
    在这里插入图片描述 # translate() 移动方法 通过此方法,元素根据给定的left(x坐标)和top(y坐标)位置参数,从当前位置移动。
    也可以单独设置沿着X轴设置移动 translateX();
    当然也可单独沿着Y轴设置移动 translateY();

添加transform:translate(50px,50px);
移动
在这里插入图片描述
添加transform:translateX(50px);
在这里插入图片描述在这里插入图片描述添加transform:translateY(50px);
在这里插入图片描述在这里插入图片描述
#rotate() 旋转方法 通过顺时针旋转给定的角度,
允许负值,元素将逆时针旋转 参数是一个角度值

添加一个transform:rotate(45deg),顺时针转动
在这里插入图片描述在这里插入图片描述添加一个transform:rotate(-30deg);
在这里插入图片描述在这里插入图片描述

  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 1
    评论
评论 1
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值