IT兄弟连 HTML5教程 CSS3属性特效 2D变换1

通过CSS3转换,能够对元素进行移动、缩放、转动、拉长或拉伸。它如何工作?转换是使元素改变形状、尺寸和位置的一种效果。CSS3转换包括2D转换和3D转换,本小结我们来了解2D变换的转换方法。

转换属性包含transform和transform-origin,它们的介绍如表1:

表1 转换属性

其中,transform有五种方法,它们的方法介绍如表2:

表2 transform方法

1 translate()方法

通过translate() 位移函数,元素从其当前位置移动,根据给定的left(x坐标) 和top(y坐标) 位置参数。translate()方法可以拆分为translateX()和translateY()方法,分别对元素的left和top位置设置参数。下面通过一个实例来解释这个方法,我们为img元素的left设置为0,top设置为0,当鼠标移入浏览器后,让它相对与当前位置向下移动50px,向右移动100px,再给它设定一个过渡效果,以便读者可以更好的体会到translate()方法实现的效果,代码如下:

该代码的解释为,img图像的left为100px,在浏览器里的执行初始效果如图1所示:

图1 translate()方法

当鼠标移入到浏览器后,我们可以发现图片的位置发生了改变,相对于之前的位置向下移动了50px,向右移动了100px,在浏览器里的执行效果如图2所示:

图2 translate()方法

2 rotate() 方法

通过rotate() 方法,元素顺时针旋转给定的角度。允许负值,元素将逆时针旋转。默认旋转基点为元素中心。

同样,我们通过一个小案例来解释这个方法。一个html文档里包含一个img元素,当鼠标移入该文档时,让图片旋转180deg。代码如下:

该代码的解释为,img图像初始状态没有旋转过,当鼠标移入body时,图片经过2s顺时针旋转180deg,默认的旋转基点为图片中心。在浏览器里的执行初始效果如图3:

图3 rotate旋转

当鼠标移入到浏览器后,我们可以发现图片变成了倒立的,也就是旋转了180deg,在浏览器里的执行效果如图4:

图4 rotate旋转

另外,我们还可以为该图片设置旋转基点,transform-origin属性允许我们改变被转换元素的位置,2D转换元素能够改变元素x轴和y轴。该属性的语法为:

transform-origin: x-axis y-axis z-axis;

该属性默认值为“50% 50% 0”。针对2D转换,我们可以先忽略z-axis,它是针对3D转换需要设定的值,我们会在下一小节提到。该属性的取值及描述如表3:

表3 转换属性

通过使用transform-origin来设置转换元素的位置为左上角。将上述案例的CSS代码替换如下:

当鼠标移入到body后,我们可以发现图片绕着左边界的中心点旋转了180deg,在浏览器里的执行效果如图5所示:

图5 设置转换元素的位置

  • 发表于:
  • 原文链接https://kuaibao.qq.com/s/20191129A0HWU900?refer=cp_1026
  • 腾讯「云+社区」是腾讯内容开放平台帐号(企鹅号)传播渠道之一,根据《腾讯内容开放平台服务协议》转载发布内容。

扫码关注云+社区

领取腾讯云代金券