前往小程序,Get更优阅读体验!
立即前往
首页
学习
活动
专区
工具
TVP
发布
社区首页 >专栏 >网页|你不知道的HTML——transform

网页|你不知道的HTML——transform

作者头像
算法与编程之美
发布2019-10-10 17:07:35
1.8K0
发布2019-10-10 17:07:35
举报
文章被收录于专栏:算法与编程之美

问题描述

在之前写的如何打印用六边形组合的蜂窝状图形的博客中,有简单的提到transform标签。但是对于这个属性的值,并没有怎么简介。今天就来学习了解一下transform标签吧!

解决方案

Transform的意思是使什么改变形态; 使什么改变外观(或性质); 使改观等。在HTML中,我们可以利用transform功能来实现文字或图像的旋转、缩放、倾斜、移动这四种类型的变形处理。

Transform常见的属性包括:rotate、 skew、scale、translate 。需要注意的就是这些属性还有x轴、y轴的区分,比如:rotatex() 和 rotatey()。当我们使用transform对元素进行旋转、缩放、倾斜、移动时,我们需要考虑transform的优先级。即rotate,scale,skew,translate。

图2.1

下面就来了解一下这四个属性:

(1)rotate(旋转)用法:transform: rotate(xxdeg)。

单位deg为单位度的意思,正数为顺时针旋转,负数为逆时针旋转,。

(2)scale(缩放)用法:transform: scale(0.5);transform: scale(0.5, 2)。

这里的参数表示缩放倍数。一个参数时表示水平和垂直同时缩放该倍率

两个参数时第一个参数指定水平方向的缩放倍率,第二个参数指定垂直方向的缩放倍率。

(3)skew(倾斜)用法:transform: skew(30deg); transform: skew(30deg, 30deg)。

参数表示倾斜角度,单位为deg。一个参数时:表示水平方向的倾斜角度。两个参数时:第一个参数表示水平方向的倾斜角度,第二个参数表示垂直方向的倾斜角度。

需要特别提醒的是skew的默认原点transform-origin是这个图像的中心点。但是图像的中心点(基准点)是可以改变的。用法是transform-origin: 10px 10px。表示相对左上角原点的距离。第一个参数表示相对左上角原点水平方向的距离,第二个参数表示相对左上角原点垂直方向的距离。两个参数除了可以设置为具体的像素值,其中第一个参数可以指定为left、center、right,第二个参数可以指定为top、center、bottom。

(4)translate(移动)用法:transform: translate(45px) ;transform: skew(45px, 150px)。参数表示移动距离。一个参数时:表示水平方向的移动距离。两个参数时:第一个参数表示水平方向的移动距离,第二个参数表示垂直方向的移动距离。

结语

Html相对于其他的程序语言是要简单些。但是了解容易,精通难。不论对待任何学习的东西,我们都要认真对待。

END

主 编 | 张祯悦

责 编 | 刘 连

本文参与 腾讯云自媒体同步曝光计划,分享自微信公众号。
原始发表:2019-10-09,如有侵权请联系 cloudcommunity@tencent.com 删除

本文分享自 算法与编程之美 微信公众号,前往查看

如有侵权,请联系 cloudcommunity@tencent.com 删除。

本文参与 腾讯云自媒体同步曝光计划  ,欢迎热爱写作的你一起参与!

评论
登录后参与评论
0 条评论
热度
最新
推荐阅读
领券
问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档