CSS-transform【上】(2D转换)【看这一篇就够了！！！】

2024-09-06 01:36
文章标签 css 转换 一篇 frontend 就够 2d transform

本文主要是介绍CSS-transform【上】(2D转换)【看这一篇就够了！！！】，希望对大家解决编程问题提供一定的参考价值，需要的开发者们随着小编来一起学习吧！

目录

transform属性

transform的2D变换函数

transform的3D转换属性值

2D转换

translate位移

translate(x,y)

x，y为px长度单位

x，y为%百分比

y值不写，默认为0

translateX(x)与translateY(y)

translate与绝对定位结合实现元素水平垂直居中

scale(x,y)

百分比单位

scaleX(x)与scaleY(y)

skew斜切

rotate旋转

transform-origin

关键字表示

数值表示法

百分比表示法

scale与skew都可以设置其变换原点

2D转换综合写法顺序问题

2D转换实战应用

旋转的三角形

鼠标滑动图片放大

transform属性

  • 在CSS中，利用transform这个属性实现对元素进行旋转、缩放、倾斜或平移
  • transform属性的值可以是none或一个或多个css变换函数
  • transform的值不是none时，元素会创建自己的层叠上下文

transform的2D变换函数

属性值描述实例
translate(x,y)x，y 为长度单位,可以是 px，也可以是百分比%，
x 表示元素在 x 轴上的移动量
y 表示元素在 y 轴上的移动量，如果 y 值不写，则默认为 0，例如 translate(10px)表示 translate(10px,0)		transform:translate(100px,200px)
translateX(x)x 为长度单位，可以是 px，也可以是百分比%
表示元素在平面 x 轴上的位移量		transform:translateX(300px)
translateY(y)y 为长度单位，可以是 px，也可以是百分比%
表示元素在平面 Y 轴上的位移量		transform:translateY(200px)
rotate(ax)ax 代表旋转的角度
正角表示顺时针旋转
负角表示逆时针旋转		transform:rotate(30deg)
scaleX(x)x 数字类型，表示元素在 x 轴上的缩放比transform:scaleX(2)
scaleY(y)y 数字类型，表示元素在 y 轴上的缩放比transform:scaleY(2)
scale(x,y)x 数字类型，表示元素在 x 轴上的缩放比
y 数字类型，表示元素在 y 轴上的缩放比
当只有 x，没有 y 时，则 y 默认为 x，元素在 x，y 轴上均匀缩放		transform:scale(2,3)
skew(ax,ay)ax 表示一个角度，表示沿着 x 横坐标扭曲元素的角度
ay 表示一个角度，表示沿着 y 纵坐标扭曲元素的角度		transform:skew(30deg,30deg)
skewX(ax)ax 表示一个角度，表示沿着 x 横坐标扭曲元素的角度,形成水平拉伸效果transform:skewX(30deg)
skewY(ay)ay 表示一个角度，表示沿着 y 纵坐标扭曲元素的角度，形成垂直拉伸效果transform:skewY(30deg)

transform的3D转换属性值

属性值描述实例
translateZ(z)x 为 px 长度单位
元素在 3D 空间 z 轴方向上的位移量		transform:translateZ(200px)
translate3d(x,y,z)x，y，z 分别为 px 长度单位
x 表示元素在 x 轴坐标上的位移量
y 表示元素在 y 轴坐标上的位移量
z 表示元素在 z 轴坐标上的位移量，该值不能使用百分比，如果使用会被认为是无效属性		transform:translate3d(50px,30px ,50px)
rotateX(ax)表示元素绕X轴旋转一定的角度
ax 表示度数，可以为正，也可以为负		transform:rotateX(30deg);
rotateY(ay)表示元素绕Y轴旋转一定的角度
ay 表示度数，可以为正，也可以为负		transform:rotateY(30deg)
rotateZ(az)表示元素绕Z轴旋转一定的角度
ax 表示度数，可以为正，也可以为负		transform:rotate(30deg);

2D转换

我们先来了解一下2D平面

下图里的x和y轴，就是基于2D平面图形

后期的所有2D动画特效都是在这个2D的平面操作

注意：

  • 元素的左上角坐标为(0，0)
  • (0，0)坐标的右方，为x轴的正方向
  • (0，0)做表的下方，为y轴的正方向

translate位移

css中通过给transform添加translate(x,y)或translateX(x)或translateY(y)来实现元素的水平或垂直位移

属性值描述举例
translate(x,y)实现元素水平和垂直位移量translate(30px,50px)
translateX(x)实现元素水平位移量translateX(30px)
translateY(y)实现元素垂直位移量translateY(50px)

translate(x,y)

  • x和y是长度值length，可以是px，也可以是%百分比
  • x表示元素在x轴上的位移量，正表示向右移动，负表示向左移动
  • y表示元素的y轴上的位移量，正表示向下移动，负表示向上移动
  • 位移和相对定位非常像，位移变形也会“老家留坑”，机会占据原来的位置
  • 同时不会对其它元素造成影响，相当于悬浮在其它元素上面

x，y为px长度单位

<style>.box {width: 100px;height: 100px;}.box1 {background-color: tomato;/* 元素水平向右移动50px，向下移动50px */transform: translate(50px, 50px);}.box2 {background-color: khaki;}
</style>
<body><div class="box box1"></div><div class="box box2"></div>
</body>
未添加transform添加transform

x，y为%百分比

  • x和y为%百分比，这个百分比分别是相对元素自身的可视宽和可视高而言
  • 在标准盒子模型下：
    • 水平位移 = (width + 左右padding + 左右border) * x%
    • 垂直位移 = (heigt + 上下padding + 上下border) * y%
<style>.box {width: 200px;height: 100px;}.box1 {padding: 25px;border: 25px solid skyblue;background-color: tomato;/* 水平位移=（200+25*2+25*2）*50%=150px垂直位移=（100+25*2+25*2）*25%=50px;即：translate(50%,25%)等同于translate(150px,50px)*/transform: translate(50%, 25%);}.box2 {background-color: khaki;}
</style>
<body><div class="box box1"></div><div class="box box2"></div>
</body>

效果：

y值不写，默认为0

<style>.box {width: 100px;height: 100px;}.box1 {background-color: tomato;/* 水平位移=100*50%=50px垂直位移=0*/transform: translate(50%);}.box2 {background-color: khaki;}
</style>
<body><div class="box box1"></div><div class="box box2"></div>
</body>

效果：

translateX(x)与translateY(y)

  • translateX(x)实现元素在x轴的位移量
  • translateY(y)实现元素在y轴的位移量
  • 本质上translate(x,y)是translateX与translateY两者的复合写法
  • transform后面如果跟多个变换函数，则各函数之间用空格隔开
<style>.box {width: 100px;height: 100px;}.box1 {background-color: tomato;/* 水平向右移动50px垂直向下移动30px */transform: translateX(50px) translateY(30px);}.box2 {background-color: khaki;}
</style>
<body><div class="box box1"></div><div class="box box2"></div>
</body>

效果：

translate与绝对定位结合实现元素水平垂直居中

使用translate移动，可以不再使用“margin-top”与“margin-left”实现居中，超级方便

/* 先利用绝对定位让元素的顶部和左侧分别与父元素垂直和水平中间对齐然后再利用translate，让元素向上和向左移动自身宽度的一半这样就实现了水平和垂直居中
*/
position: absolute;
top: 50%;
left: 50%;
/* 向左和向上分别移动元素自身宽和高的一半 */
transform: translate(-50%, -50%);

scale(x,y)

  • x，y都是数字类型，可以用百分比%表示，分别表示元素的宽和高缩放比
  • 当x，y值 > 1时，表示放大，< 1时，表示缩小， = 1表示不变
  • 当只有x，没有y时，则y默认为x，元素宽高同时均匀缩放
<style>.box {width: 100px;height: 100px;background-color: khaki;margin: 150px;}.item {width: 100px;height: 100px;background-color: rgb(255, 99, 71, 0.5);/* 宽放大2倍，高放大1.5倍 */transform: scale(2, 1.5);/* 宽高同时放大2倍 */transform: scale(2);/* 宽缩小一半，高放大2倍 */transform: scale(0.5, 2);}
</style>
<body><div class="box"><div class="item"></div></div>
</body>
scale(2,1.5)scale(2)scale(0.5,2)

百分比单位

  • x%和y%分别相对于元素的可视宽和可视高而言
  • 在标准盒子模型下
    • 宽缩放后大小 =（width + 左右 padding + 左右 border) * x%;
    • 高缩放后大小 =（height + 上下 padding + 上下 border) * y%
<style>.box {width: 150px;height: 150px;/* 背景颜色 黄色 */background-color: khaki;margin: 150px;}.item {width: 50px;height: 50px;padding: 25px;border: 25px solid rgb(243, 147, 147, 0.9);/* 宽放大2倍，高缩小一半 宽缩放后大小=（50+25*2+25*2）*200%=300px高缩放后大小=（50+25*2+25*2）*50%=75px*/transform: scale(200%, 50%);}
</style>
<body><div class="box"><div class="item"></div></div>
</body>
scale(200%,50%)0scale(200%)

scaleX(x)与scaleY(y)

  • scaleX(x) 实现元素的宽缩放效果
  • scaleY(Y) 实现元素高缩放效果
  • 本质上 scale(x,y)是 scaleX(x) 与 scaleY(y)的复合写法
/*transform:scale(x,y) 同等于 transform:scaleX(x) scaleY(y);
*/
transform: scaleX(x) scaleY(y);
<style>.box {width: 100px;height: 100px;background-color: khaki;margin: 150px;}.item {width: 100px;height: 100px;background-color: rgb(255, 99, 71, 0.5);/* 宽放大两倍，高缩小一半 */transform: scaleX(2) scaleY(0.5);}
</style>
<body><div class="box"><div class="item"></div></div>
</body>

skew斜切

  • css中通过给“transform”添加“skew(ax,ay)”或“skewX(ax)”或“skewY(ay)”变换函数来实现元素斜切效果
  • skewX(ax)：用于水平拉伸，使元素的每个点在水平方向上扭曲一定角度
  • skewY(ay)：用于垂直拉伸，使元素的每个点在垂直方向上扭曲一定角度
  • skew(ax,ay)：用于水平和垂直拉伸，使元素在水平和垂直方向上扭曲一定角度
  • ax：表示一个角度，沿着横坐标扭曲元素的角度
  • ay：表示一个角度，沿着纵坐标扭曲元素的角度

skewX(30deg)skewX(-30deg)skewY(30deg)skew(30deg,30deg)

rotate旋转

  • css中通过给“transform:rotate(ax)”来表示元素旋转效果
  • ax表示旋转的角度，比如rotate(45deg)
  • ax为正，表示顺时针方向旋转
  • ax为负，表示逆时针方向旋转
<style>.body,ul {margin: 0;padding: 0;}ul {list-style-type: none;}ul li {width: 100px;height: 100px;border: 2px solid red;margin: 20px;float: left;}.item {height: 100%;background-color: khaki;}.item1 {/* 顺时针旋转到30deg */transform: rotate(30deg);}.item2 {/* 逆时针旋转到30deg */transform: rotate(-30deg);}.item3 {/* 顺时针旋转到180deg */transform: rotate(180deg);}.item4 {/* 顺时针旋转30deg */transform: rotate(450deg);}
</style>
<body><ul><li><div class="item item1">30deg</div></li><li><div class="item item2">-30deg</div></li><li><div class="item item3">180deg</div></li><li><div class="item item4">450deg</div></li></ul>
</body>

效果：

transform-origin

  • transform-orgin属性，设置元素的变换原点，即元素在交换时是以围绕那个点来发生变换的
  • 默认值：transform-origin:50% 50% 0
  • x，y的值可以使长度值(px或百分比%)还可以是预设的关键词
  • z的值只能是长度值pc
/*x： 表示x轴的坐标位置y： 表示y轴的坐标位置z: 表示z轴的坐标位置
*/
transform-orign: x y z;

注意：

在2D转换中，元素的默认变换原点为元素的中心(transform:50% 50%)

 

关键字表示

关键词(left、right)与(top、bottom)与center三组中任意一个与另一组中的一个关键字组合来表示

关键 字描述
left原点为元素左边中间位置，同left center一样
right原点为元素右边中间位置，同right center一样
top原点为元素上边中间位置，同top center一样
bottom原点为元素下边中间位置，同bottom center一样
center原点为元素中间位置，同center center一样
top left原点为元素左上角，相当于坐标（0 0）
top right原点为元素右上角
left bottom原点为元素左下角
right bottom原点为元素右下角

元素的默认变换原点为元素的中间位置“transform-origin:center;”

<style>.body,ul {margin: 0;padding: 0;}ul {list-style-type: none;margin: 50px;}ul li {width: 100px;height: 100px;border: 2px solid red;margin: 40px;float: left;}.item {height: 100%;background-color: khaki;/* 顺时针旋转60deg */transform: rotate(60deg);}.item1 {/* 旋转的原点 */transform-origin: top;}.item2 {/* 旋转的原点 */transform-origin: right;}.item3 {/* 旋转的原点 */transform-origin: bottom;}.item4 {/* 旋转的原点 */transform-origin: left;}.item5 {/* 旋转的原点 */transform-origin: center;}
</style>
<body><ul><li><div class="item item1">top</div></li><li><div class="item item2">right</div></li><li><div class="item item3">bottom</div></li><li><div class="item item4">left</div></li><li><div class="item item5">center</div></li></ul>
</body>

效果

数值表示法

transform-origin: x y;
  • x，y为长度单位(px或百分比%)
  • 当y省略不写时，默认为元素的垂直中心点
<style>.body,ul {margin: 0;padding: 0;}ul {list-style-type: none;margin: 50px;}ul li {width: 100px;height: 100px;border: 2px solid red;margin: 40px;float: left;}.item {height: 100%;background-color: khaki;/* 元素旋转60deg */transform: rotate(60deg);}.item1 {/* 旋转的原点 */transform-origin: 0 0;}.item2 {/* 旋转的原点 */transform-origin: 20px 20px;}.item3 {/* 旋转的原点 */transform-origin: 50px 50px;}.item4 {/* 旋转的原点 */transform-origin: 100px 0px;}.item5 {/* 旋转的原点 */transform-origin: 50px 100px;}
</style>
<body><ul><li><div class="item item1">0 0</div></li><li><div class="item item2">20px 20px</div></li><li><div class="item item3">50px 50px</div></li><li><div class="item item4">100px 0px</div></li><li><div class="item item5">50px 100px</div></li></ul>
</body>

效果

百分比表示法

百分比相对的是元素自身的可视宽和可视高而言

<style>.body,ul {margin: 0;padding: 0;}ul {list-style-type: none;margin: 50px;}ul li {width: 100px;height: 100px;border: 2px solid red;margin: 40px;float: left;}.item {width: 100px;height: 100px;background-color: khaki;transform: rotate(60deg);}.item1 {/* 旋转的原点 */transform-origin: 100%;}.item2 {/* 旋转的原点 */transform-origin: 50%;}.item3 {/* 旋转的原点 */transform-origin: 100% 0%;}.item4 {/* 旋转的原点 */transform-origin: 100% 100%;}.item5 {/* 旋转的原点 */transform-origin: 100% 50%;}
</style>
<body><ul><li><div class="item item1">100%</div></li><li><div class="item item2">50%</div></li><li><div class="item item3">100% 0%</div></li><li><div class="item item4">100% 100%</div></li><li><div class="item item5">100% 50%</div></li></ul>
</body>

scale与skew都可以设置其变换原点

元素默认的转换原点为元素的中心点“transform-orgin:50% 50%;”

<style>.box {width: 100px;height: 100px;border: 2px solid red;margin: 150px;}.item {width: 100px;height: 100px;background-color: rgb(242, 232, 147, 0.5);transform: scale(2);/* 原点左上角 */transform-origin: 0 0;/* 原点右边中间 */transform-origin: 100%;}
</style>
<body><div class="box"><div class="item"></div></div>
</body>

效果

2D转换综合写法顺序问题

同时使用多个转换，其多个转换函数之间用空格隔开

transform: translate() rotate() scale();

转换函数的顺序会影响转换的效果，例如：“先旋转会影响坐标轴方向”

<style>.box {width: 100px;height: 100px;border: 2px solid red;margin: 20px 150px;}.item {width: 100px;height: 100px;}.item1 {/* 背景颜色为 黄色 */background-color: khaki;/* 先旋转，再位移 */transform: rotate(180deg) translateX(100px);}.item2 {/* 背景颜色为 天蓝色 */background-color: skyblue;/* 先位移，再旋转 */transform: translateX(200px) rotate(180deg);}
</style>
<body><div class="box"><div class="item item1"></div></div><div class="box"><div class="item item2"></div></div>
</body>

效果：

2D转换实战应用

旋转的三角形

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title><style>.jiantou::after {content: "";display: block;width: 20px;height: 20px;border-right: 2px solid red;border-bottom: 2px solid red;transform: rotate(-135deg);transition: transform 1s;}.jiantou:hover::after {transform: rotate(45deg);}</style>
</head>
<body><div class="jiantou"></div>
</body>
</html>

效果：

鼠标滑动图片放大

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title><style>.container {width: 200px;height: 300px;margin: 100px auto;position: relative;overflow: hidden;}.container::after {content: "";display: none;position: absolute;width: 100%;height: 100%;top: 0;left: 0;background-color: rgba(0, 0, 0, 0.5);z-index: 3;}.container img {width: 200px;height: 300px;object-fit: cover;transition: transform 1s;}.container .play {position: absolute;width: 50px;height: 50px;opacity: 0;background-image: url("/static/play.png");background-size: contain;top: 50%;left: 50%;transform: translate(-50%,-50%);z-index: 4;}.container:hover::after {display: block;}.container:hover img{transform: scale(1.2);}.container:hover .play{opacity: 1;transform: translate(-50%,-50%) scale(1.5);}</style>
</head>
<body><div class="container"><img src="/static/jjy.png" alt=""><div class="play"></div></div>
</body>
</html>

效果

这篇关于CSS-transform【上】(2D转换)【看这一篇就够了！！！】的文章就介绍到这儿，希望我们推荐的文章对编程师们有所帮助！


http://www.chinasem.cn/article/1140632。

相关文章

全面解析HTML5中Checkbox标签

全面解析HTML5中Checkbox标签

《全面解析HTML5中Checkbox标签》Checkbox是HTML5中非常重要的表单元素之一，通过合理使用其属性和样式自定义方法，可以为用户提供丰富多样的交互体验，这篇文章给大家介绍HTML5中C... 在html5中，Checkbox（复选框）是一种常用的表单元素，允许用户在一组选项中选择多个项目。本
阅读更多...
HTML5 搜索框Search Box详解

HTML5 搜索框Search Box详解

《HTML5搜索框SearchBox详解》HTML5的搜索框是一个强大的工具，能够有效提升用户体验,通过结合自动补全功能和适当的样式，可以创建出既美观又实用的搜索界面,这篇文章给大家介绍HTML5... html5 搜索框（Search Box）详解搜索框是一个用于输入查询内容的控件，通常用于网站或应用程
阅读更多...
CSS3中的字体及相关属性详解

CSS3中的字体及相关属性详解

《CSS3中的字体及相关属性详解》：本文主要介绍了CSS3中的字体及相关属性，详细内容请阅读本文，希望能对你有所帮助... 字体网页字体的三个来源：用户机器上安装的字体，放心使用。保存在第三方网站上的字体，例如Typekit和Google,可以link标签链接到你的页面上。保存在你自己Web服务器上的字
阅读更多...
java Long 与long之间的转换流程

java Long 与long之间的转换流程

《javaLong与long之间的转换流程》Long类提供了一些方法,用于在long和其他数据类型（如String）之间进行转换,本文将详细介绍如何在Java中实现Long和long之间的转换,感... 目录概述流程步骤1：将long转换为Long对象步骤2：将Longhttp://www.cppcns.c
阅读更多...
html 滚动条滚动过快会留下边框线的解决方案

html 滚动条滚动过快会留下边框线的解决方案

《html滚动条滚动过快会留下边框线的解决方案》：本文主要介绍了html滚动条滚动过快会留下边框线的解决方案，解决方法很简单，详细内容请阅读本文，希望能对你有所帮助... 滚动条滚动过快时，会留下边框线但其实大部分时候是这样的，没有多出边框线的滚动条滚动过快时留下边框线的问题通常与滚动条样式和滚动行
阅读更多...
在Java中将XLS转换为XLSX的实现方案

在Java中将XLS转换为XLSX的实现方案

《在Java中将XLS转换为XLSX的实现方案》在本文中,我们将探讨传统ExcelXLS格式与现代XLSX格式的结构差异,并为Java开发者提供转换方案,通过了解底层原理、性能优势及实用工具,您将掌握... 目录为什么升级XLS到XLSX值得投入？实际转换过程解析推荐技术方案对比Apache POI实现编程
阅读更多...
使用vscode搭建pywebview集成vue项目实践

使用vscode搭建pywebview集成vue项目实践

《使用vscode搭建pywebview集成vue项目实践》：本文主要介绍使用vscode搭建pywebview集成vue项目实践,具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地... 目录环境准备项目源码下载项目说明调试与生成可执行文件核心代码说明总结本节我们使用pythonpywebv
阅读更多...
Python使用FFmpeg实现高效音频格式转换工具

Python使用FFmpeg实现高效音频格式转换工具

《Python使用FFmpeg实现高效音频格式转换工具》在数字音频处理领域,音频格式转换是一项基础但至关重要的功能,本文主要为大家介绍了Python如何使用FFmpeg实现强大功能的图形化音频转换工具... 目录概述功能详解软件效果展示主界面布局转换过程截图完成提示开发步骤详解1. 环境准备2. 项目功能结
阅读更多...
使用Python实现网页表格转换为markdown

使用Python实现网页表格转换为markdown

《使用Python实现网页表格转换为markdown》在日常工作中,我们经常需要从网页上复制表格数据,并将其转换成Markdown格式,本文将使用Python编写一个网页表格转Markdown工具,需... 在日常工作中，我们经常需要从网页上复制表格数据，并将其转换成Markdown格式，以便在文档、邮件或
阅读更多...
使用Python和Tkinter实现html标签去除工具

使用Python和Tkinter实现html标签去除工具

《使用Python和Tkinter实现html标签去除工具》本文介绍用Python和Tkinter开发的HTML标签去除工具,支持去除HTML标签、转义实体并输出纯文本,提供图形界面操作及复制功能,需... 目录html 标签去除工具功能介绍创作过程1. 技术选型2. 核心实现逻辑3. 用户体验增强如何运行
阅读更多...

Copyright China编程 23002807@qq.com

沪ICP备2023033072号-2