专栏首页学习猿地HTML5教程 CSS3属性特效 2D变换1

抱歉,你查看的文章已删除

HTML5教程 CSS3属性特效 2D变换1

版权声明:本文为博主原创文章,遵循 CC 4.0 BY-SA 版权协议,转载请附上原文出处链接和本声明。

本文链接:https://blog.csdn.net/ITXDL123/article/details/103304044

通过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 设置转换元素的位置

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

我来说两句

0 条评论
登录 后参与评论

相关文章

  • 【案例】融360:智能金融系统建设最佳实践案例

    大数据、云计算、人工智能等颠覆性技术的快速发展,为金融机构可持续地开展普惠金融业务奠定了技术前提,使得原本高度碎片化、用户数量庞大但个体资金量小、无利可图的“长...

    数据猿
  • 代码: 如何教强化学习模型骑自行车去金门大桥?model-base model-free 整合

    用户1908973
  • HTML基础知识

      属性的作用就是就为元素提供更多的信息,大多数元素都可以拥有属性    属性的语法:<标签 属性1=参数1>   注意空格的使用

    用户3159471
  • 一文读懂数据库最新技术趋势:TDSQL带你深度纵览VLDB 2019

    一年一度的数据库领域顶级会议 VLDB 2019于当地时间8月26日-8月30日在美国加利福尼亚州洛杉矶召开。来自学术界和工业界的参会者们汇聚一堂,共襄盛会,探...

    分布式数据库TDSQL
  • 一文读懂数据库最新技术趋势:TDSQL带你深度纵览VLDB 2019

    ? 一年一度的数据库领域顶级会议 VLDB 2019 于当地时间8月26日-8月30日在美国加利福尼亚州洛杉矶召开。来自学术界和工业界的参会者们汇聚一堂,共襄...

    腾讯技术工程官方号
  • 不可思议的纯 CSS 实现鼠标跟随效果

    直接进入正题,鼠标跟随,顾名思义,就是元素会跟随着鼠标的移动而作出相应的运动。大概类似于这样:

    Sb_Coco

扫码关注云+社区

领取腾讯云代金券