css3中2D转换之有趣的transform形变效果


Posted in HTML / CSS onFebruary 24, 2022

在CSS3中,transform属性应用于元素的2D或3D转换,可以利用transform功能实现文字或图像的旋转、缩放、倾斜、移动这4中类型的形变处理

css3中2D转换之有趣的transform形变效果

语法:

div{
    transform: none|transform-functions;
}

transform属性可以指定为关键字值none或一个或多个<transform-function>

注意:当transform有多个属性值时要用空格隔开

属性值:

描述
translate(x,y) 定义 2D 转换,沿着 X 和 Y 轴移动元素。
translateX(n) 定义 2D 转换,沿着 X 轴移动元素。
translateY(n) 定义 2D 转换,沿着 Y 轴移动元素。
scale(x,y) 定义 2D 缩放转换,改变元素的宽度和高度。
scaleX(n) 定义 2D 缩放转换,改变元素的宽度。
scaleY(n) 定义 2D 缩放转换,改变元素的高度。
rotate(angle) 定义 2D 旋转,在参数中规定角度。
rotateX() 定义 3D 旋转,沿 X 轴。
rotateY() 定义 3D 旋转,沿 Y 轴。
skew(x-angle,y-angle) 定义 2D 倾斜转换,沿着 X 和 Y 轴。
skewX(angle) 定义 2D 倾斜转换,沿着 X 轴。
skewY(angle) 定义 2D 倾斜转换,沿着 Y 轴。

下面对这些属性值进行一一讲解:

一、rotate(旋转)

rotate(angle)通过指定的角度参数对原元素指定一个2D旋转,angle代表旋转角度:正值表示顺时针旋转、负值表示逆时针旋转

单位:deg(角度)、rad(弧度)、grad(梯度)、turn(圈)

转换:弧度 = 角度*π/180

<div class="box"></div>
.box{
    width: 200px;
    height: 200px;
    background-color: #B39DDB;
    transition: .2s; /* 过渡属性 */
}
.box:hover{
    transform: rotate(30deg); /* 顺时针旋转30度 */
}

这里用了下css3中transition过渡属性,不然在形变时会很生硬

效果如下:

css3中2D转换之有趣的transform形变效果

rotateXrotateY是围绕X轴和Y轴旋转的,上面这个案例可以看做是围绕Z轴旋转,大家可以脑构一下三维坐标系,我们眼睛所看到屏幕的方向就可以当做Z轴

css3中2D转换之有趣的transform形变效果

rotateX围绕X轴旋转:

.box:hover{
    transform: rotateX(45deg); /* x轴旋转45度 */
}

css3中2D转换之有趣的transform形变效果

rotateY围绕Y轴旋转:

.box:hover{
    transform: rotateY(45deg); /* Y轴旋转45度 */
}

css3中2D转换之有趣的transform形变效果

二、translate(位移)

translate()这个CSS函数在水平和/或垂直方向上重新定位元素

translate(x,y)对元素同时向X轴和Y轴移动,值为负数则反方向移动

translateX()元素在X轴移动

translateY()元素在Y轴移动

css3中2D转换之有趣的transform形变效果

下面分别演示这三个功能效果:

.box:hover{
    transform: translate(40px,80px); /* 向X轴移动+40px,向y轴移动+80px */
}

效果如下:

css3中2D转换之有趣的transform形变效果

注意:如果translate()值传递一个值,则默认和translateX()效果一致

translateX()元素在X轴移动

.box:hover{
    transform: translateX(50px); /* 向X轴移动+50px */
}

效果如下:

css3中2D转换之有趣的transform形变效果

translateY()元素在Y轴移动

.box:hover{
    transform: translateY(50px); /* 向Y轴移动+50px */
}

效果如下:

css3中2D转换之有趣的transform形变效果

三、scale(缩放)

CSS 函数scale()用于修改元素的大小。可以通过向量形式定义的缩放值来放大或缩小元素,同时可以在不同的方向设置不同的缩放值

css3中2D转换之有趣的transform形变效果

该变换通过一个二维向量确定在一个方向缩放的多少

  • 当坐标值处于区间 [-1, 1]之外时,该变换将在相应的坐标方向上放大该元素
  • 当处在区间之中时,该变换将在相应的坐标方向上缩小该元素
  • 当值为1时将不进行任何处理
  • 当为负数时,将进行像素点反射之后再进行大小的修改。

语法:

scale(sx)
/* or */
scale(sx,sy)

sx表示缩放向量的横坐标

sy表示缩放向量的纵坐标。如果未设置,则他的默认值被设置为sx。 从而使得元素在保持原有形状下均等缩放

html

<div class="box">鼠标移入放大/缩小</div>

css

.box{
    width: 200px;
    height: 200px;
    background-color: #B39DDB;
    transition: .2s; /* 过渡属性 */
    margin: 300px auto;
    text-align:center;
    line-height:200px;
}
.box:hover{
    transform: scale(2);
    /* 等同于 */
    transform: scaleX(2) scaleY(2);
}

设置一个值就是均等缩放,效果如下:

css3中2D转换之有趣的transform形变效果

设置两个值就是在X和Y两个维度缩放并移动缩放中心,例子如下:

.box:hover{
    transform: scale(2,3);
}

css3中2D转换之有趣的transform形变效果

如果设置的值在区间 [-1, 1]之间,该变换将在相应的坐标方向上缩小该元素:

.box:hover{
    transform: scale(0.5);
}

css3中2D转换之有趣的transform形变效果

值为1则为元素本身大小,不进行任何变换

如果值为负数,则反向镜像放大:

.box:hover{
    transform: scale(-1.5); /* 镜像放大 */
}

css3中2D转换之有趣的transform形变效果

scaleX()scaleY()只是单独在X轴和Y轴方向缩放元素,可以理解为scale()是它俩的复合属性,如果只是单个方向缩放,直接使用对应函数即可:

scaleX()只在X轴方向缩放:

.box:hover{
    transform: scaleX(2); /* x方向放大两倍 */
    /* or */
    transform: scale(2,1);
}

css3中2D转换之有趣的transform形变效果

scaleY()只在Y轴方向缩放:

.box:hover{
    transform: scaleY(2); /* Y方向放大两倍 */
    /* or */
    transform: scale(1,2);
}

css3中2D转换之有趣的transform形变效果

四、skew(倾斜)

skew()函数定义了一个元素在二维平面上的倾斜转换

单位:deg(角度)、rad(弧度)、grad(梯度)、turn(圈)

转换:弧度 = 角度*π/180

这种转换是一种剪切映射(横切),它在水平和垂直方向上将单元内的每个点扭曲一定的角度。每个点的坐标根据指定的角度以及到原点的距离,进行成比例的值调整;因此,一个点离原点越远,其增加的值就越大

语法:

skew(ax)
/* or */
skew(ax, ay)

ax是一个<angle>,表示用于沿横坐标扭曲元素的角度

ay是一个<angle>,表示用于沿纵坐标扭曲元素的角度。如果未定义,则其默认值为0,导致纯水平倾斜。

html

<div class="box">倾斜元素</div>

css

.box{
    width: 200px;
    height: 200px;
    background-color: #B39DDB;
    transition: .2s; /* 过渡属性 */
    margin: 300px auto;
    text-align:center;
    line-height:200px;
}
.box:hover{
    /* 纯水平倾斜 */
    transform: skew(25deg);
    /* or */
    transform: skew(25deg,0);
    /* or */
    transform: skewX(25deg);
}

效果如下:

css3中2D转换之有趣的transform形变效果

注意:如果值为负数,则在相反方向倾斜,比如下面这个例子:

.box:hover{
    /* 负值反方向倾斜 */
    transform: skew(-25deg);
}

css3中2D转换之有趣的transform形变效果

设置两个值就是同时在X轴和Y轴上倾斜元素:

.box:hover{
    /* 同时在X轴和Y轴上倾斜元素 */
    transform: skew(20deg,10deg);
}

css3中2D转换之有趣的transform形变效果

skewX()skewY()只是单独在X轴和Y轴方向倾斜元素,可以理解为skew()是它俩的复合属性,如果只是单个方向倾斜,直接使用对应函数即可:

skewX()只在X轴方向倾斜:

.box:hover{
    /* 只在X轴上倾斜元素 */
    transform: skewX(30deg);
}

css3中2D转换之有趣的transform形变效果

skewY()只在Y轴方向倾斜:

.box:hover{
    /* 只在Y轴上倾斜元素 */
    transform: skewY(30deg);
}

css3中2D转换之有趣的transform形变效果

五、transform-origin(基点)

transform-originCSS属性让你更改一个元素变形的原点

语法:

/* One-value syntax */
transform-origin: 2px;
transform-origin: bottom;

/* x-offset | y-offset */
transform-origin: 3cm 2px;

/* x-offset-keyword | y-offset */
transform-origin: left 2px;

x-offset表示变形变形中心距离盒模型的左侧偏移值

y-offset表示变形变形中心距离盒模型的顶部偏移值

offset-keyword表示定义相对应的变形中心偏移

取值:

  • 自定义(单位:cm、px、%)
  • 关键词:top、bottom、left、right、center(默认)

transform-origin属性可以使用一个,两个或三个值来指定,其中每个值都表示一个偏移量

栗子1:

html

<div class="box">不同基点形变</div>

css

.box{
    width: 200px;
    height: 200px;
    background-color: #B39DDB;
    transition: .2s; /* 过渡属性 */
    margin: 300px auto;
    text-align:center;
    line-height:200px;
    /* 设置元素变形基点 */
    transform-origin: 0 0; /* 左上角 */
    /* 等同于 */
    transform-origin: top left;
}
.box:hover{
    transform:  rotate(30deg); /* 旋转 */
}

效果如下:

css3中2D转换之有趣的transform形变效果

栗子2:

.box{
    width: 200px;
    height: 200px;
    background-color: #B39DDB;
    transition: .2s; /* 过渡属性 */
    margin: 300px auto;
    text-align:center;
    line-height:200px;
    /* 设置元素变形基点 */
    transform-origin: 100% -30%;
}
.box:hover{
    transform: scale(1.7); /* 旋转 */
}

效果如下:

css3中2D转换之有趣的transform形变效果

栗子3:

.box{
    width: 200px;
    height: 200px;
    background-color: #B39DDB;
    transition: .2s; /* 过渡属性 */
    margin: 300px auto;
    text-align:center;
    line-height:200px;
    /* 设置元素变形基点 */
    transform-origin: bottom 100%;
}
.box:hover{
    transform: skewX(50deg);
}

效果如下:

css3中2D转换之有趣的transform形变效果

六、结束语

到这里css3中的2D形变分享到这里,另外需要大家注意的是:如果transform有多个属性值时需要用空格隔开,并且属性值书写顺序的不同得到的效果也是不同的!!!

例如:

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title></title>
        <style type="text/css">
.box{
    width: 200px;
    height: 200px;
    background-color: #B39DDB;
    transition: .2s; /* 过渡属性 */
    margin: 300px auto;
    text-align:center;
    line-height:200px;
}
.box:hover{
    transform: translateX(200px) rotate(30deg) skew(20deg);
}
        </style>
    </head>
    <body>
        <div class="box">不同基点形变</div>
    </body>
</html>

效果如下:

css3中2D转换之有趣的transform形变效果

下面我们把transform的属性值顺序换一下看看效果:

.box:hover{
    transform: rotate(30deg) translateX(100px) skew(20deg);
}

css3中2D转换之有趣的transform形变效果

可以看出这两个顺序不同得到的效果也是不一样的,各个属性值之间必须用空格分开!

到此这篇关于css3中2D转换之有趣的transform形变的文章就介绍到这了,更多相关css3有趣transform形变内容请搜索三水点靠木以前的文章或继续浏览下面的相关文章,希望大家以后多多支持三水点靠木!

 
HTML / CSS 相关文章推荐
纯CSS打造(无图像无js)的非常流行的讲话(语音)气泡效果
Dec 28 HTML / CSS
推荐一些比较有用的css3新属性
Nov 11 HTML / CSS
使用CSS3制作一个简单的Chrome模拟器
Jul 15 HTML / CSS
HTML5+CSS3实例 :canvas 模拟实现电子彩票刮刮乐代码
Dec 30 HTML / CSS
利用css3如何设置没有上下边的列表间隔线
Jul 03 HTML / CSS
css3实现平移效果(transfrom:translate)的示例
Nov 13 HTML / CSS
基于Modernizr 让网站进行优雅降级的分析
Apr 21 HTML / CSS
HTML5 embed 标签使用方法介绍
Aug 13 HTML / CSS
深入浅析HTML5中的SVG
Nov 27 HTML / CSS
实例讲解使用HTML5 Canvas绘制阴影效果的方法
Mar 25 HTML / CSS
详解html5 canvas常用api总结(二)--绘图API
Dec 14 HTML / CSS
HTML5 localStorage使用总结
Feb 22 HTML / CSS
css3带你实现3D转换效果
bootstrapv4轮播图去除两侧阴影及线框的方法
企业开发CSS命名BEM代码规范实践
CSS3实现360度循环旋转功能
CSS实现九宫格布局(自适应)的示例代码
Feb 12 #HTML / CSS
postman中form-data、x-www-form-urlencoded、raw、binary的区别介绍
Jan 18 #HTML / CSS
MIME类型中application/xml与text/xml的区别介绍
Jan 18 #HTML / CSS
You might like
PHP下使用CURL方式POST数据至API接口的代码
2013/02/14 PHP
Codeigniter通过SimpleXML将xml转换成对象的方法
2015/03/19 PHP
IE JS无提示关闭窗口不提示的方法
2010/04/29 Javascript
yepnope.js 异步加载资源文件
2011/09/08 Javascript
解决jquery submit()提交表单提示:f[s] is not a function
2013/01/23 Javascript
jQuery表格插件ParamQuery简单使用方法示例
2013/12/05 Javascript
javascript四舍五入函数代码分享(保留后几位)
2013/12/10 Javascript
javascript的propertyIsEnumerable()方法使用介绍
2014/04/09 Javascript
基于jquery实现的文字向上跑动类似跑马灯的效果
2014/06/17 Javascript
jQuery实现点击小图显示大图代码分享
2015/08/25 Javascript
JavaScript操作HTML DOM节点的基础教程
2016/03/11 Javascript
jquery获取select选中值的文本,并赋值给另一个输入框的方法
2018/08/21 jQuery
基于Vue组件化的日期联动选择器功能的实现代码
2018/11/30 Javascript
微信小程序单选radio及多选checkbox按钮用法示例
2019/04/30 Javascript
vue中axios防止多次触发终止多次请求的示例代码(防抖)
2020/02/16 Javascript
[02:53]DOTA2英雄基础教程 山岭巨人小小
2013/12/09 DOTA
[01:09:10]NB vs Liquid Supermajor小组赛 A组胜者组决赛 BO3 第一场 6.2
2018/06/04 DOTA
python数组过滤实现方法
2015/07/27 Python
Python自定义进程池实例分析【生产者、消费者模型问题】
2016/09/19 Python
Spring实战之使用util:命名空间简化配置操作示例
2019/12/09 Python
Python3常见函数range()用法详解
2019/12/30 Python
python标准库sys和OS的函数使用方法与实例详解
2020/02/12 Python
使用Django清空数据库并重新生成
2020/04/03 Python
Django3中的自定义用户模型实例详解
2020/08/23 Python
教你使用Sublime text3搭建Python开发环境及常用插件安装另分享Sublime text3最新激活注册码
2020/11/12 Python
一款利用纯css3实现的360度翻转按钮的实例教程
2014/11/05 HTML / CSS
英国最大的女士服装零售商:Bonmarché
2017/08/17 全球购物
英国日常交易网站:Wowcher
2018/09/04 全球购物
世界上最大的字体市场:MyFonts
2020/01/10 全球购物
skyn ICELAND官网:冰岛成分天然护肤品
2020/08/24 全球购物
Athleta官网:购买女士瑜伽服、技术运动服和休闲运动服
2020/11/12 全球购物
大学生文员专业个人求职信范文
2014/01/05 职场文书
《绿色蝈蝈》教学反思
2014/03/02 职场文书
团支部建设方案
2014/05/02 职场文书
党员个人查摆剖析材料
2014/10/16 职场文书
2019幼儿教师求职信(3篇)
2019/09/20 职场文书