kkw学习css的过程,第7天,2D转换

微信扫一扫,分享到朋友圈

kkw学习css的过程,第7天,2D转换

对我来说,2D转换开始打开了我的新世界的大门。

1、translate() 偏移

元素从当前位置移动,根据给定的x值在平面横向移动,y值平面纵向移动。

x与y的值,可以使用像素也可以使用百分比。可以为负数。

transform: translate(100px, 100px);

2、rotate() 旋转

rotate,给定一个角度可以旋转元素,默认是顺时针方向,角度可以为负数,

transform: rotate(90deg); 旋转90°,元素从水平变为垂直。

3、skew() 反转

元素反转指定的角度,根据x的值与y的值。

transform: skew(30deg,0)

这个值,因为自己的想象空间有点弱的样子,不知道怎么解释了

4、scale() 缩放

transform: scale(2,4);只可以为0或者其他正值了,当值为小数的时候,说明将元素缩小,大于1的时候,将元素放大的倍数。

当有两个的值的是,分别代表对于x方向的缩放与y轴方向。一个值的时候,代表x与y缩放同样的倍数。

5、matrix() 整合方法

可以同时使用上述的方法

transform: matrix()

transform:matrix(0.866,0.5,-0.5,0.866,0,0);官方案例,将元素旋转30°。目前我没有使用过。这个属性。

6、transform-orgin:变化初始位置

变化的初始位置,默认都是从中心点开始的,但是有些时候,我们希望他们从顶点开始,然后就可以用到这个属性,类似设置坐标的原点,对于3D的还有Z轴的的值可以设置。

transform-orgin: 20%,20%; 也可以为负值。

transform-orgin: top,top,也可以用单词的位置来表示。

微信扫一扫,分享到朋友圈

kkw学习css的过程,第7天,2D转换

劳斯莱斯推出Cullinan SUV 1:8模型车:售价与全尺寸雅力士旗鼓相当

上一篇

报道称供应链管控不严致iOS 14内部早期版本泄露

下一篇

你也可能喜欢

kkw学习css的过程,第7天,2D转换

长按储存图像,分享给朋友