CSS实现五种常用的2D转换


Posted in HTML / CSS onDecember 06, 2021

CSS 中的 2D 转换允许我们在二维空间中执行一些基本的变换操作,例如移动、旋转、缩放或扭曲等,变换后的元素与绝对定位的元素类似,不会影响周围的元素,但可以和周围的元素重叠,不同的是,转换后的元素在页面中任然会占用为转换之前的空间。

借助 CSS 中的 transform 属性以及下列转换函数就可以实现 2D 转换:

  1. matrix():以一个包含六个值(a, b, c, d, e, f)的变换矩阵的形式指定一个 2D 变换,相当于直接应用一个 [a,b,c,d,e,f] 的变换矩阵;
  2. translate():将对象沿 X 轴和 Y 轴平移,该函数需要提供 1~2 个参数,第一个参数对应 X 轴,第二个参数对应 Y 轴,如果未提供第二个参数,则默认值为 0;
  3. translatex():将对象沿 X 轴(水平方向)的平移;
  4. translatey():将对象沿 Y 轴(垂直方向)的平移;
  5. rotate():旋转指定对象,在函数的参数中可以指定旋转的角度;
  6. scale():将对象进行缩放,该函数需要提供 1~2 个参数,第一个参数对应 X 轴,第二个参数对应 Y 轴,如果未提供第二个参数,则默认取第一个参数的值;
  7. scalex():将对象进行缩放(改变元素的宽度);
  8. scaley():将对象进行缩放(改变元素的高度);
  9. skew():将对象沿 X 轴和 Y 轴方向进行倾斜扭曲,该函数需要提供 1~2 个参数,第一个参数对应 X 轴,第二个参数对应 Y 轴。如果未提供第二个参数,则默认值为 0;
  10. skewx():将对象沿 X 轴的(水平方向)扭曲;
  11. skewy():将对象沿 Y 轴的(垂直方向)扭曲。

1. translate()

translate() 函数用来根据指定的参数将元素沿水平(X轴)或垂直(Y轴)方向移动,函数的语法格式如下:

translate(tx, ty)

其中 tx 对应元素在水平(X轴)方向的移动距离,ty 对应元素在垂直(Y轴)方向的移动距离,参数 ty 可以忽略(默认为 0),两个参数均可以为负值。

【示例】使用 translate() 函数来移动指定的元素:

<!DOCTYPE html>
<html>
<head>
    <style>
        div {
            width: 100px;
            height: 100px;
            background-color: #CCC;
            transform: translate(100px, 10px);
        }
    </style>
</head>
<body>
    <div></div>
</body>
</html>

运行结果如下图所示:

CSS实现五种常用的2D转换

图:translate() 函数演示

如果只是将元素水平移动或者只是将元素垂直移动,也可以使用 translateX()(将元素水平移动)或 translateY()(将元素垂直移动),translateX() 和 translateY() 函数均只需要提供一个参数即可,例如:

translateX(100px);      /* 等同于 translate(100px, 0px); */
translateY(10px);        /* 等同于 translate(0px, 10px); */

2. rotate()

rotate() 函数用来按照给定的角度来旋转元素,函数的语法格式如下:

rotate(a)

其中参数 a 表示元素要旋转的角度,若 a 为正值则表示顺时针旋转,若 a 为负值则表示逆时针旋转。

【示例】使用 rotate() 函数来旋转元素:

<!DOCTYPE html>
<html>
<head>
    <style>
        div {
            width: 100px;
            height: 100px;
            background-color: #CCC;
            margin: 20px 0px 0px 20px;
            transform: rotate(45deg);
        }
    </style>
</head>
<body>
    <div></div>
</body>
</html>

运行结果如下图所示:

CSS实现五种常用的2D转换

图:rotate() 函数演示

3. scale()

scale() 函数用来缩放(放大或缩小)指定的元素,函数的语法格式如下:

scale(sx, sy)

其中 sx 表示水平方向的缩放比例,sy 表示垂直方向的缩放比例。另外,参数 sy 可以省略,它的默认值等于 sx。

【示例】使用 scale() 函数缩放指定元素:

<!DOCTYPE html>
<html>
<head>
    <style>
        div {
            width: 100px;
            height: 100px;
            background-color: #CCC;
            transform: scale(0.7);
        }
    </style>
</head>
<body>
    <div></div>
</body>
</html>

运行结果如下图所示:

CSS实现五种常用的2D转换

图:scale() 函数演示

提示:当 scale() 中,给定的参数值在 -1~1 范围之外时,元素将被放大;当在参数值在 -1~1 范围之内时,元素将被缩小。

与 translate() 函数类似,如果是仅在水平方向或者仅在垂直方向上缩放元素大小,也可以使用 scaleX()(在水平方向缩放元素)和 scaleY()(在垂直方向缩放元素)函数。scaleX() 和 scaleY() 函数仅需要提供一个参数即可,例如:

scaleX(0.5);    /* 等同于 scale(0.5, 1); */
scaleY(0.5);    /* 等同于 scale(1, 0.5); */

4. skew()

skew() 函数用来将元素沿水平方向(X轴)和垂直方向(Y轴)倾斜扭曲,函数的语法格式如下:

skew(ax, ay)

其中,参数 ax 表示元素水平方向的扭曲角度,参数 ay 表示元素垂直方向的扭曲角度。另外,参数 ay 可以省略,若省略参数 ay,则其默认值为 0。

【示例】使用 skew() 函数来扭曲指定元素:

<!DOCTYPE html>
<html>
<head>
    <style>
        div {
            width: 100px;
            height: 100px;
            background-color: #CCC;
            margin: 20px 0px 0px 10px;
            transform: skew(-15deg, 20deg);
        }
    </style>
</head>
<body>
    <div></div>
</body>
</html>

运行结果如下图所示:

CSS实现五种常用的2D转换

图:skew() 函数演示

另外,如果是仅在水平方向或者仅在垂直方向上对元素进行扭曲,也可以使用 skewX()(在水平方向缩放元素)和 skewY()(在垂直方向缩放元素)函数来完成。skewX() 和 skewY() 函数仅需要提供一个参数即可,例如:

skewX(15deg);    /* 等同于 skew(15deg, 0deg); */
skewY(15deg);    /* 等同于 skew(0deg, 15deg); */

5. matrix()

matrix() 函数可以看作是 skew()、scale()、rotate() 和 translate() 几个函数的缩写形式,通过 matrix() 函数可以同时定义所有 2D转换操作,函数的语法格式如下:

matrix(a, b, c, d, tx, ty)

matrix() 函数中的 6 个参数分别对应 scaleX()、skewY()、skewX()、scaleY()、translateX()、translateY() 几个函数,您可以使用 matrix() 来实现各种 2D转换操作,例如:

  • translate(tx, ty) = matrix(1, 0, 0, 1, tx, ty);:其中 tx 和 ty 是水平和垂直平移值;
  • rotate(a) = matrix(cos(a), sin(a), -sin(a), cos(a), 0, 0);:其中,a 是度数的值。您可以交换 sin(a) 和 -sin(a) 值来进行反向旋转;
  • scale(sx, sy) = matrix(sx, 0, 0, sy, 0 ,0);:其中 sx 和 sy 是水平和垂直缩放比例值;
  • skew(ax, ay) = matrix(1, tan(ay), tan(ay), 1, 0 ,0);:其中 ax 和 ay 是以 deg 为单位的水平和垂直值。

【示例】使用 matrix() 函数对元素进行 2D转换操作:

<!DOCTYPE html>
<html>
<head>
    <style>
        div {
            width: 100px;
            height: 100px;
            background-color: #CCC;
            margin: 20px 0px 0px 10px;
            float: left;
        }
        .one {
            transform: matrix(0.866, 0.5, -0.5, 0.866, 0, 0);
        }
        .two {
            margin-left: 35px;
            transform: matrix(0.586, 0.8, -0.8, 0.686, 0, 0);
        }
        .three {
            margin-left: 40px;
            margin-top: 25px;
            transform: matrix(0.586, 0.8, -0.8, 0.866, 0, 0);
        }
        .four {
            transform: matrix(0.586, 0.8, -0.8, 0.586, 40, 30);
        }
    </style>
</head>
<body>
    <div class="one"></div>
    <div class="two"></div>
    <div class="three"></div>
    <div class="four"></div>
</body>
</html>

运行结果如下图所示:

CSS实现五种常用的2D转换

图:matrix() 函数演示 

到此这篇关于CSS实现五种常用的2D转换的文章就介绍到这了,更多相关CSS  2D转换内容请搜索三水点靠木以前的文章或继续浏览下面的相关文章,希望大家以后多多支持三水点靠木!

 
HTML / CSS 相关文章推荐
css3之UI元素状态伪类选择器实例演示
Aug 11 HTML / CSS
CSS3 :nth-child()伪类选择器实现奇偶行显示不同样式
Nov 05 HTML / CSS
一款纯css3实现的竖形二级导航的实例教程
Dec 11 HTML / CSS
CSS3绘制六边形的简单实现
Aug 25 HTML / CSS
CSS3实现莲花绽放的动画效果
Nov 06 HTML / CSS
HTML5 MiranaVideo播放器 (代码开源)
Jun 11 HTML / CSS
html5指南-3.如何实现html元素拖拽功能
Jan 07 HTML / CSS
详解HTML5将footer置于页面最底部的方法(CSS+JS)
Oct 11 HTML / CSS
html5 冒号分隔符对齐的实现
Jul 31 HTML / CSS
HTML利用九宫格原理进行网页布局
Mar 13 HTML / CSS
HTML5 Blob对象的具体使用
May 22 HTML / CSS
HTML5实现移动端点击翻牌功能
Oct 23 HTML / CSS
CSS巧用渐变实现高级感背景光动画
在HTML中引入CSS的几种方式介绍
div与span之间的区别与使用介绍
Unicode中的CJK(中日韩统一表意文字)字符小结
Dec 06 #HTML / CSS
HTML5 新增内容和 API详解
Nov 17 #HTML / CSS
Html5同时支持多端sdk的小技巧
Nov 17 #HTML / CSS
使用canvas仿Echarts实现金字塔图的实例代码
You might like
php数组函数序列之array_sum() - 计算数组元素值之和
2011/10/29 PHP
Yii遍历行下每列数据的方法
2016/10/17 PHP
js使用eval解析json实例与注意事项分享
2014/01/18 Javascript
调整小数的格式保留小数点后两位
2014/05/14 Javascript
给应用部分的js代码设定一个统一的入口
2014/06/15 Javascript
js实现按钮加背景图片常用方法
2014/11/01 Javascript
js实现圆盘记速表
2015/08/03 Javascript
jquery.validate[.unobtrusive]和Bootstrap实现tooltip错误提示问题分析
2016/10/30 Javascript
JS遍历对象属性的方法示例
2017/01/10 Javascript
JS异步加载的三种实现方式
2017/03/16 Javascript
Vue2.0 UI框架ElementUI使用方法详解
2017/04/14 Javascript
最实用的JS数组函数整理
2017/12/05 Javascript
p5.js入门教程和基本形状绘制
2018/03/15 Javascript
vue.js 实现评价五角星组件的实例代码
2018/08/13 Javascript
React SSR样式及SEO的实践
2018/10/22 Javascript
JS实现求字符串中出现最多次数的字符和次数示例
2019/07/05 Javascript
vue2.x 通过后端接口代理,获取qq音乐api的数据示例
2019/10/30 Javascript
vue 使用class创建和清除水印的示例代码
2020/12/25 Vue.js
[02:12]2019完美世界全国高校联赛(春季赛)报名开启
2019/03/01 DOTA
python将处理好的图像保存到指定目录下的方法
2019/01/10 Python
python对文件目录的操作方法实例总结
2019/06/24 Python
Django Docker容器化部署之Django-Docker本地部署
2019/10/09 Python
使用Python制作缩放自如的圣诞老人(圣诞树)
2019/12/25 Python
在Tensorflow中实现梯度下降法更新参数值
2020/01/23 Python
python tkinter GUI绘制,以及点击更新显示图片代码
2020/03/14 Python
浅谈keras中的batch_dot,dot方法和TensorFlow的matmul
2020/06/18 Python
python为什么会环境变量设置不成功
2020/06/23 Python
python中最小二乘法详细讲解
2021/02/19 Python
英国购买威士忌网站:Master of Malt
2019/09/26 全球购物
大学信息公开实施方案
2014/03/09 职场文书
活动总结怎么写
2014/04/28 职场文书
高效课堂标语
2014/06/26 职场文书
创先争优承诺书
2015/01/20 职场文书
小学语文的各类谚语(70首)
2019/08/15 职场文书
《工作是最好的修行》读后感3篇
2019/12/13 职场文书
JS继承最简单的理解方式
2021/03/31 Javascript