美文网首页
CSS 2D转换transform

CSS 2D转换transform

作者: 社会主义顶梁鹿 | 来源:发表于2020-06-20 21:50 被阅读0次

2D转换——网页二维坐标系。转换transform可以实现元素的位移、旋转、缩放等效果。转换可以理解为变形。

transform: 属性            位移translate    旋转rotate    缩放scale

一、2D转换之位移translate

移动盒子的方法:定位、盒子的外边距、2D转换位移translate

transform:translate(x,y)    数值单位都是像素px

transform:translateX(x)    只移动x轴

transform:translateY(y)    只移动y轴

(1)translate最大的优点就是不会影响其他元素的位置

(2)translate中的百分比单位是相对于自身元素的,translate:(50%,50%)

(3)对行内元素没有效果

附:盒子垂直居中方法:定位+边框移动(需要计算),现在可用定位+2D转换位移translate:(-50%,-50%)

二、2D转换之旋转rotate

transform:rotate(度数) 

(1)rotate里面跟度数,单位是deg。比如rotate(45deg)。

(2)度数为正时,顺时针;角度为负时,逆时针。

(3)默认旋转的中心点是元素的中心点。

设置2D转换中心点transform-origin

transform-origin: x y  

(1)后面参数x和y用空格隔开

(2)x和y默认转换的中心点是元素的中心点(50% 50%)

(3)还可以给x和y设置像素或者方位名词(top、bottom、left、right、center) 

三、2D转换之缩放scale

transform:scale(x,y)     

(1)x、y即宽高的倍数,不加单位

(2)可以只跟一个参数,代表宽高同倍数缩放,比如transform:scale(0.5)  

(3)scale比起直接修改width、height的优点在于不会影响其他的盒子,而且可以设置中心点。

2D转换综合写法以及顺序问题

(1)同时使用多个转换,其格式为:transform:translate() rotate() scale()  中间用空格隔开即可

(2)其顺序会影响转换的效果,先旋转会改变坐标轴的方向

(3)当同时有位移和其他属性时,一定要将位移放在最前面

相关文章

  • css动画

    css3动画 过渡:transition 2D 转换 transform 3D 转换 transform 动画:a...

  • 网络编程(六)之CSS3 2D/3D及动画

    下面仍然是跟着pink老师学习CSS3更高级的用法。 一、 CSS3 2D转换 转换(transform)是CSS...

  • web学习:05-CSS3转换

    1.CSS3 Transform 2.CSS3 2D转换 2.1 rotate 旋转角度 2.2 scale 缩放...

  • CSS3 转换(1):2D

    知识点:CSS3 TransformCSS3 2D转换CSS3 3D转换CSS3 Transform与坐标系统CS...

  • 学习笔记-CSS-2017.2.17

    一、CSS3 2D 转换 1、transform(rotate(deg))通过 rotate() 方法,元素顺时针...

  • 动画transition、animation

    --- 动画 transform、transition、animation、 2D转换transform:tran...

  • 6_动画_其他属性

    2D、3D变形动画 transform:2D变形:复合属性 通过 CSS3 转换,我们能够对元素进行移动、缩放、转...

  • 探究CSS3动画:transform/transition/an

    转换(transform) 如大家了解的一样,转换分为2D转换和3D转换。利用CSS3的转换功我们能够对元素进行移...

  • 7. css动画-页面特效

    7.1 2D、3D转换效果(transform属性) 说明:通过CSS3转换,可以对元素进行移动、转动、缩放、拉长...

  • CSS Transform

    CSS Transform(上:2D Transform) 前言及Transform 基本介绍 MDN官方文档介绍...

网友评论

      本文标题:CSS 2D转换transform

      本文链接:https://www.haomeiwen.com/subject/pvsgxktx.html