首页 > 其他分享 >CSS3——transform属性

CSS3——transform属性

时间：2024-12-06 18:31:22浏览次数：7  
标签：CSS3 盒子 width transform 效果图 属性 200px

一、前言

transform属性是CSS3中新增的一种非常强大的属性，它允许你旋转、缩放、倾斜或平移给定元素。这是通过修改 CSS 视觉格式化模型的坐标空间实现的。
接下来就让我们一起学习transform属性

二、transfrom:translate;

位移,可以改变元素的位置,

translateX

让元素沿X轴方向进行位移

代码

	.box {
	    width: 500px;
	    height :300px;
	    background-color: #ccc;
	    margin: 100px auto;
  	}
  	.content {
	  	width:200px;
	  	height:200px;
	  	background-color:#f90;
	  	transform: translateX(200px);
	}
  <div class="box">
    <div class="content"></div>
  </div>

效果图一

在这里插入图片描述

效果图二

在这里插入图片描述
查看两张效果图进行对比,可以看到,效果图一,从开发者工具中取消了transform属性,橙色盒子在大盒子的左上角显示,而效果图二中可以看到,从开发者工具中选中了transform属性,橙色盒子向右移动了200px的距离

translateY

让元素沿Y轴进行位移

代码

.box {
    width: 500px;
    height :300px;
    background-color: #ccc;
    margin: 100px auto;
  }
  .content {
  	width:200px;
  	height:200px;
  	background-color:#f90;
  	transform: translateY(200px);
	}

<div class="box">
    <div class="content"></div>
  </div>

效果图一

在这里插入图片描述

效果图二

在这里插入图片描述
查看两张效果图进行对比,可以看到,效果图一,从开发者工具中取消了transform属性,橙色盒子在大盒子的左上角显示,而效果图二中可以看到,从开发者工具中选中了transform属性,橙色盒子向下移动了200px的距离

translate

一个值是,代表的是水平方向移动(沿X轴),两个值时,第一个值代表水平方向移动,第二个值代表垂直方向移动(沿Y轴)

代码

 .content {
  	width:200px;
  	height:200px;
  	background-color:#f90;
  	transform: translate(200px,200px);
	}

效果图一

在这里插入图片描述

效果图二

在这里插入图片描述
查看两张效果图进行对比,可以看到,效果图一,从开发者工具中取消了transform属性,橙色盒子在大盒子的左上角显示,而效果图二中可以看到,从开发者工具中选中了transform属性,可以看到橙色盒子向右移动200xp,又向下移动200px
关于translate,可以设置负值,设置为负值时,沿X轴向左移动,沿Y轴向上移动,也可以设置%(百分比)

三、transform:scale;

让元素放大或者缩小

scaleX;

定义元素沿X轴缩放,取值为1,大于1放大,小于1缩小

代码

 .content {
  	width:200px;
  	height:200px;
  	background-color:#f90;
  	transform: scaleX(1.3);
	}

效果图一

在这里插入图片描述

效果图二

在这里插入图片描述

对比两张效果图可以看到,效果图一,我们从开发者工具中取消transform属性,可以看到,盒子的大小并没有发生变化,在效果图二中,我们选中了transform属性,可以从效果图二中看到,盒子的宽从200px变成了260px,并且橙色盒子左侧超出灰色背景一部分

scaleY;

定义元素沿Y轴缩放,取值为1,大于1放大,小于1缩小

代码

.content {
  	width:200px;
  	height:200px;
  	background-color:#f90;
  	transform: scaleY(1.3);
	}

效果图一

在这里插入图片描述

效果图二

在这里插入图片描述
对比两张效果图可以看到,效果图一,我们从开发者工具中取消transform属性,可以看到,盒子的大小并没有发生变化,在效果图二中,我们选中了transform属性,可以从效果图二中看到,盒子的高度从200px变成了260px,并且橙色盒子顶部超出灰色背景一部分

scale

同时设置水平,垂直方向的缩放比例,一个值代表同时缩放水平和垂直缩放,两个值时,第一个值代表水平缩放,第二个值代表的是垂直缩放

代码(一个值)

 .content {
  	width:200px;
  	height:200px;
  	background-color:#f90;
  	transform: scale(1.3);
	}

效果图

在这里插入图片描述
观察代码,可以看到我们给盒子设置的宽高是200px,但是从效果图中可以看到盒子的宽高是260px,这是通过了scale属性,让盒子的宽高同时缩放了1.3倍

代码(两个值)

 .content {
  	width:200px;
  	height:200px;
  	background-color:#f90;
  	transform: scale(1.3,1.5);
	}

效果图

在这里插入图片描述

观察代码,可以看到我们给盒子设置的宽高是200px,但是从效果图中可以看到盒子的宽是260px,高变成了300px,从代码中可以看到给scale设置了两个值,第一个值代表水平缩放1.3倍,第二个值代表垂直缩放1.5倍

可以设为负值

scale属性是可以设置为负值的(不建议使用)

代码

  .content {
  	width:200px;
  	height:200px;
  	background-color:#f90;
  	transform: scale(-1);
	}

效果图一

在这里插入图片描述

效果图二

在这里插入图片描述
观察代码,可以看到scale的值被设置成负一,对比两张效果图,可以看到,效果图二选中transform属性后,橙色盒子内的内容在盒子的右下,并且文字是倒着的

不能对行内元素进行缩放

scale标签是不支持对行内元素进行缩放的(行内元素:不可以设置宽高,可以共处一行"span标签")

代码

 .content {
  	width:200px;
  	height:200px;
  	background-color:#f90;
  	transform: scale(1.3);
	}
<div class="box">
    <span class="content">最编程!!!</span>
  </div>

效果图

在这里插入图片描述
查看带单,可以看到已经将div标签换成了span标签,观察效果图可以看到,从开发者工具中选中了transform属性,并且水平,水质方向缩放1.3倍,但是我们的内容并没有改变大小

四、transform:rotate;

2D旋转,让元素在二位平面内顺时针或者逆时针旋转

rotateX

让一个元素围绕横坐标 (水平轴,X轴) 旋转，而不会对其进行变形。

代码

 .content {
  	width:200px;
  	height:200px;
  	background-color:#f90;
  	transform: rotateX(45deg);
	}
.  <div class="box">
    <div class="content">最编程!!!</div>
  </div>

效果图一

在这里插入图片描述

效果图二

在这里插入图片描述
对比两张效果图,效果图一,在开发者工具中取消transform属性,盒子宽高200px,显示白灰色背景左上角,效果图二在开发者工具中选中了transform属性,可以看到,橙色盒子和文本高度减小,这是因为让橙色盒子沿x轴顺时针旋转45deg,显示给我们的样式发生变化,因为是二维空间,显示的不明显

ritateY

让一个元素围绕横坐标 (垂直轴,Y轴) 旋转，而不会对其进行变形。

代码

  .content {
  	width:200px;
  	height:200px;
  	background-color:#f90;
  	transform: rotateY(45deg);
	}

效果图一

在这里插入图片描述

效果图二

在这里插入图片描述
对比两张效果图,效果图一,在开发者工具中取消transform属性,盒子宽高200px,显示白灰色背景左上角,效果图二在开发者工具中选中了transform属性,可以看到,橙色盒子和文本宽度减小,这是因为让橙色盒子沿Y轴顺时针旋转45deg,显示给我们的样式发生变化,因为是二维空间,显示的不明显

rotateZ

可以让一个元素围绕横 Z 轴旋转，而不会对其进行变形

在这里插入图片描述

代码

 .content {
 	width:200px;
 	height:200px;
 	background-color:#f90;
 	transform: rotateZ(45deg);
   }

效果图一

在这里插入图片描述

效果图二

在这里插入图片描述

对比两张效果图,效果图一,在开发者工具中取消transform属性,盒子宽高200px,显示白灰色背景左上角,效果图二在开发者工具中选中了transform属性,可以看到,橙色盒子的变化非常明显,顺时针旋转45度

totate

绕z轴旋转

代码

.content {
 	width:200px;
 	height:200px;
 	background-color:#f90;
 	transform: rotate(135deg);
   }

效果图

在这里插入图片描述
观察效果图,查看到橙色盒子旋转135度,与绕z轴旋转的效果图旋转方向一致

可以设置为负值

rotate属性可以设置为负值,设置负值为逆时针方向旋转,

代码

.content {
  	width:200px;
  	height:200px;
  	background-color:#f90;
  	transform: rotatez(-45deg);
	}

效果图

在这里插入图片描述
查看代码,让橙色盒子沿Z轴旋转-45deg,与上一张效果图对比,发现橙色盒子中的文本与上一张效果图旋转方向相反

五、transform：skew；

让一个元素在二维平面中倾斜转换

skewX

沿X轴（水平方向倾斜）

代码

 .content {
  	width:150px;
  	height:100px;
  	background-color:#f90;
  	transform: skewX(30deg);
	}

效果图一

在这里插入图片描述

效果图二

在这里插入图片描述
查看代码,设置盒子宽150px,高200px,背景色橙色
对比两张效果图,可以看到,效果图二比效果图一又一个向左倾斜,设置为负值的话则会向右倾斜
在这里插入图片描述

skewY

沿Y轴（垂直方向倾斜）

代码

  .content {
  	width:150px;
  	height:100px;
  	background-color:#f90;
  	transform: skewY(30deg);
	}

效果图一

在这里插入图片描述

效果图二

在这里插入图片描述
对比两张效果图,观察文本,可以看到文本向上倾斜,如果设置为负值文本则会向下倾斜在这里插入图片描述

skew

一个值代表skewX,两个值时.第一个值代表的是skewX,第二个值代表的是skewY
(这里直接放置效果图,样式代码在效果图中开发者工具内,有截取)

效果图一

在这里插入图片描述
可以看到一个值时,橙色盒子向左倾斜30deg

效果图二

在这里插入图片描述
可以看到两个值时,橙色盒子向左倾斜30deg,向上倾斜25deg.

多重变换

可以用同一个transform书写多个属性值

代码

 .content {
  	width:150px;
  	height:100px;
  	background-color:#f90;
  	transform: translate(200px) rotate(60deg);
	}

效果图一

在这里插入图片描述
从效果图中可以看到,橙色盒子即发生了位移又放生了旋转,查看代码,在一个transform属性中,先写了位移的属性值,让橙色盒子向右移动200px 又让橙色盒子沿Z轴旋转60deg

六、transform-origin

更变元素变形的原点
例如:rotate属性的变形原点(旋转原点)是盒子的中心点,使用transform-origin属性后,可以更改盒子中心点

代码

 .content {
  	width:100px;
  	height:100px;
  	background-color:#f90;
  	transform: rotate(60deg);
    transform-origin: right bottom;
	}

效果图

在这里插入图片描述
查看代码,可以看到我们使用了 transform-origin: right bottom;更改了盒子的旋转原点
查看效果图可以看到橙色盒子按照盒子的右下角旋转60deg

transform-origin取值

  • 一个值:必须是left,top,center,right,bottom 中的一个
  • 两个值,第一给值如果是left center right中的一个,另一个值必须是top,center,right中的一个
  • 三个值,前两个值和只有两个值时的用法相同。第三个值必须是(css属性会用到的长度,例如width)。它始终代表 Z 轴偏移量。

除了关键改变原点之外,还可以取值像素(px),百分比(%),这里就不过多描述,如果小伙伴该兴趣可以自己尝试,

七、总结

CSS3中的transform属性是一个功能强大的工具，它允许开发者对元素进行各种形状和位置的改变。通过合理使用该属性及其转换函数，可以创建出令人惊叹的视觉效果和用户体验。

标签：CSS3,盒子,width,transform,效果图,属性,200px
From： https://blog.csdn.net/CYX_COMnn/article/details/144249036

相关文章

  • transfrom属性案例
    一、前言上一篇文章我们一起学习了transform熟悉,这篇文章就让我们来写一些transform属性的相关案例,让我们能更加熟练地使用transform如果有小伙伴不了解transform属性的可以阅读上一篇文章(https://blog.csdn.net/CYX_COMnn/article/details/144249036?spm=1001.2014.30......
  • Linux学习(1)---文件属性和基本权限理解
    目录一.Linux文件的属性二.Linux用户权限分类三.文件权限的查询与修改1.修改用户的权限1).一般法2).8进制法2.修改所属组和所属者3.如何在创建文件权限预分配在学习linux的时候，我们用ll命令显示文件的详情信息，难免会发现文件名前面会有一大堆其它的字符，那么这些字......
  • jQuery和css3超赞select下拉列表框美化插件
    这是一款效果超赞的jQuery和css3select下拉列表框美化插件。这个select下拉列表框插件没有使用任何的图片，纯css制作，还使用了一点jQuery来完成动作交互。在线演示 下载 有两个地方需要做下说明：下面的代码中没有使用任何厂商的前缀。在插件中使用了CSS盒子模式（box-model）：......
  • jQuery和CSS3打造GOOGLE样式的用户登录界面
    这是一款使用Jquery和css3打造的GOOGLE样式的用户登录界面特效。该登录界面特效中，右上角的小问号和错误提示小图标使用SVG来制作，用户名和密码输入框采用浮动标签特效，可点击的按钮上使用了很酷的点击波特效。整个登录界面简洁大方，互动性很强。在线演示 下载 该用户登录界面......
  • 【事件相机与计算机视觉】论文阅读02--GET: Group Event Transformer for Event-Based
    GroupEventTransformer(GET)     GroupToken(GT)新的事件表现形式EventDualSelf-Attention（EDSA）  GroupTokenAggregation（GTA）GroupTokenEmbedding（GTE）  GroupSelf-Attention(GSA)   SpatialSelf-Attention(SSA)简介   本论文根据......
  • 举例说明与打印有关的属性有哪些？
    前端开发中，与打印相关的属性有很多，它们可以控制打印页面的样式和内容。以下是一些常见的例子，并根据功能进行分类：1.页面尺寸和方向:size:控制纸张大小。一些常见的值包括A4,A3,letter,legal等。也可以使用自定义尺寸，例如8.5in11in(英寸)或210mm297mm(毫米)。......
  • 请写出font属性的快捷写法
    font属性的快捷写法可以同时设置多个值，顺序如下，其中用斜体标注的属性是可选的：font:*font-style**font-variant**font-weight**font-stretch**font-size[/line-height]**font-family*;解释一下各个属性：font-style:(可选)字体的样式，例如normal,italic,oblique。f......
  • clear属性只对块级元素有效么？为何无法应用于行内元素？
    clear属性确实只对块级元素有效，它对行内元素无效。这是因为clear属性的功能是清除浮动元素对当前元素的影响，而浮动和清除浮动都是基于块级格式化上下文（BlockFormattingContext，BFC）的。行内元素不创建BFC，它们参与的是行内格式化上下文（InlineFormattingContext，IFC）。在IFC中，元......
  • H5-30 CSS3 新特性
    1、圆角使用CSS3border-radius属性，你可以给任何元素制作“圆角”border-radius属性，可以使用以下规则：①四个值：第一个值为左上角，第二个值为右上角，第三个值为右下角，第四个值为左下角②三个值：第一个值为左上角，第二个值为右上角和左下角，第三个值为右下角③......
  • PDO 中的ATTR_EMULATE_PREPARES属性详解
    PDO中的ATTR_EMULATE_PREPARES属性详解概念解释ATTR_EMULATE_PREPARES是PDO（PHPDataObjects）中的一个连接属性。PDO是PHP访问数据库的一个统一接口，它支持多种数据库系统。当使用PDO进行数据库操作时，ATTR_EMULATE_PREPARES这个属性用于控制PDO是否模拟预处理语句。预处理语......

赞助商

阅读排行

网站主页关于我们联系我们网站地图

本网站内容转载自其他媒体，侵权联系[admin##ips99.com]。

Copyright © 2020-2023 IPS99 版权所有 IPS99