HTML-CSS（四十）transfrom变形

最新推荐文章于 2024-05-17 10:26:44 发布
最新推荐文章于 2024-05-17 10:26:44 发布
阅读量662 收藏 2
点赞数
分类专栏： CSS HTML css3
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_44730244/article/details/116290196
版权
HTML 同时被 3 个专栏收录
67 篇文章 2 订阅
订阅专栏
CSS
65 篇文章 3 订阅
订阅专栏
css3
30 篇文章 1 订阅
订阅专栏

translate:位移

相对自己移动
transfrom：translateX（+numberpx）在现在基础上向右移

transfrom：translateY（+numberpx）在现在基础上向下移
transfrom：translateZ（+numberpx) 在现在基础上向外移动，需要在3d空间才能观测到变化。

x往右为正，往左为负。y往下为正，往上为负。z外为正，内为负

复合：transfrom：translate(x,y)，当你使用translate不能只写一个值，否则无效。z值不能够在复合样式加入，但是可以通过transfrom：translate3d(x,y,z)
scale:缩放

transform:scale(number)整体缩放number倍

transform:scaleX(number)宽缩放number倍

transform:scaleY(number)高缩放number倍

transform:scaleZ(number)厚度缩放number倍

复合样式：transform:scale(number1，number2) 宽缩放number1倍，高缩放number2倍。与transfrom：translate(x,y)复合样式一样transform:scaleZ(number)属于3d空间下才能观测到。如果需要将三者一起实现可以通过transform:scale3d(x,y,z
rotate：旋转

rotateX(number deg)：向里为负，向外为正（3d空间才可以观测到变化）

rotateY(number deg)：向右转为正、向左转为负（3d空间才可以观察到变化）

rotateZ(number deg)：顺时针为正，逆时针为负

注：在实现transform：rotateZ（number deg）其实等价于transform：rotate（number deg），并且transform：rotate（number deg）仅能写入一个值，多值无效。

skew：斜切 单位也是角度
skewX（number deg）正值向左斜切，负值向右斜切
在这里插入图片描述
skewY （number deg）正值向下斜切
在这里插入图片描述

transform注意事项

变形操作不会影响其他操作

在这里插入图片描述

只能添加给块元素（行内块元素）、不能添加给内联元素

复合写法，可以同时添加多个变形操作

​ 执行顺序：transform复合写法从后往前
translate会受到rotate、scale、skew影响

①scale对translate影响
在这里插入图片描述
transform:translate(100px,0) scale(0.5) ;

这个是正常顺序，元素先缩小一半，然后在在进行移动

transform: scale(0.5) translate(100px,0) ;

其实实际移动距离是50px，因为受到scale的影响，缩了50%，然后在缩放
②rotate对translate影响
在这里插入图片描述
transform: translate(100px,0) rotate(45deg) ;

先旋转45度，在移动100px

transform: rotate(45deg) translate(100px,0)

往右下角45度移动100px，然后在旋转
③斜切skew我感觉是正常的，，但是网上也有说也会影响，等我再琢磨琢磨
在这里插入图片描述
transform-origin设置transfrom变形的基点（不一定在元素内部，也可以设置在元素外部）
默认原点是center 中心 transform-origin: center center;
transform-origin: left top; （可以用单词表示）
transform-origin: 0px 100px; （x y）（可以用数字表示）
transfrm-origin:100px( 往右100px y为当前y轴中心 )
如果设置的位置超出了容器范围也是可以的
在这里插入图片描述
练习（1）斜切导航
效果：让导航列表斜切，并能够完美闭合
在这里插入图片描述
练习2变形列表
效果：当鼠标移入标题时，形成文字从右下角进入，边框从左上角进入。当鼠标移走时，边框再从左上角出去，文字从左下角出去
在这里插入图片描述

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style type="text/css">
			*{
				margin: 0;
				padding: 0;
			}
			
			li{
				position: relative;
				list-style: none;
				overflow: hidden;
			}
			
			li .image{
				float: left;
				
			}
			li figcaption{
				float: left;
			}
			li .box{
				position: absolute;
				width: 200px;
				height: 100px;
				top: -163px;
				left: -290px;
				transform: scale(0.5) skew(30deg,80deg);
				border: 1px solid white;
				z-index: 1;
				transition: 4s ease all;
			}
			li .mT{
				position: absolute;
				z-index: 1;
				font-weight: bold;
				color: white;
				/* bottom: -50px; */
				transition: 2s ease all;
				left: 290px;
				bottom: -50px;
				transform: scale(0.5);
			}
			figcaption:hover{
				color: green;
			}
			figcaption:hover ~ .mT{
				transform:translate(-180px,-120px)  scale(1) ;
				
			}
			figcaption:hover ~ .box{
			/* 	top:163px
				left:290px; */
				
				transform:translate(330px,200px)  scale(1) ;
			}
		</style>
	</head>
	<body>
		<h1 id="title">
			学习累了，看会电影
		</h1>
		<aside>
			<ul>
				<li>
					<figure>
						<div class="image">
							<img src="../img/7a7caf3b3bf04ee992d17dde8ffd1c77.png" >
						</div>
						<figcaption>
							电影首映，新年档强势来袭
						</figcaption>
						<div class="box">
							
						</div>
						<div class="mT">
							刘德华大帅
						</div>
					</figure>
					
				</li>
				<li>
					<figure>
						<div class="image">
							<img src="../img/6d76b4852f49de102dbfdbe79bbdd4af.png" >
						</div>
						<figcaption>
							电影首映，新年档强势来袭
						</figcaption>
						<div class="box">
							
						</div>
						<div class="mT">
							刘德华大帅
						</div>
					</figure>
				</li>
				<li>
					<figure>
						<div class="image">
							<img src="../img/8e2add6daceb4be3ba60a250bf452262.jpg" >
						</div>
						<figcaption>
							电影首映，新年档强势来袭
						</figcaption>
						<div class="box">
							
						</div>
						<div class="mT">
							刘德华大帅
						</div>
					</figure>
				</li>
				<li>
					<figure>
						<div class="image">
							<img src="../img/b5ba909353b7426c8e7d923b7c903cda.jpg" >
						</div>
						<figcaption>
							电影首映，新年档强势来袭
						</figcaption>
						<div class="box">
							
						</div>
						<div class="mT">
							刘德华大帅
						</div>
					</figure>
				</li>
				<li>
					<figure>
						<div class="image">
							<img src="../img/b5ba909353b7426c8e7d923b7c903cda.jpg" >
						</div>
						<figcaption>
							电影首映，新年档强势来袭
						</figcaption>
						<div class="box">
							
						</div>
						<div class="mT">
							刘德华大帅
						</div>
					</figure>
				</li>
			</ul>
		</aside>
	</body>
</html>
LJbab
关注
专栏目录
CSS 变形(CSS3) transform
快乐de馒头
01-20 4万+
一、2D变形(CSS3) transform transform是CSS3中具有颠覆性的特征之一，可以实现元素的位移、旋转、倾斜、缩放，甚至支持矩阵方式，配合过渡和即将学习的动画知识，可以取代大量之前只能靠Flash才可以实现的效果。 变形转换 transform transform 变换 变形的意思 《 transformers 变形金刚》 1、移动 translate(x, y) tr...
css3属性transform-origin讲解
在线学习web前端开发教程
01-10 279
transform是CSS3里的变换属性，常用的有translate（平移）、rotate（旋转）、skew(倾斜)、scale(缩放)方法。而transform-origin并不是transform的属性值，其具有独立的语法，但值得注意的是，transform-origin必须配合transform来使用，这个从名字也可以看得出来，就是给transform设置的各种动作设置一个参考点。默认情况...
CSS Transform
JunChow
06-17 472
CSS3中transform（变形）属性用于设置元素在2D或3D上的旋转、缩放、移动和倾斜 坐标系 transform属性是通过修改CSS视觉格式化模型的坐标空来是实现的，也就是通过修改元素自身的坐标空间，这种修改实际上对应着一个坐标系统映射转换的矩阵。通过变形变换，元素可实现在二维和三维空间内的旋转、偏移、缩放和倾斜。 CSS中的坐标系的方位 坐标轴 描述 X轴 正方向 水平向右 ...
CSS中的transform（二维变换）
热门推荐
Code6E的博客
03-24 1万+
案例来自pink老师教程，自己做了一些总结和优化，侵权删。原教程链接https://www.bilibili.com/video/BV14J4114768?p=357
html transtion 过渡
weixin_46622106的博客
12-07 146
html transtion 过渡 代码片. <!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>
HTML 变形(transform)、转换(transition)和动画(animation)
咖啡味的小认真
08-18 1万+
一、变形 Transform字面上就是变形，改变的意思。在CSS3中transform主要包括以下几种：旋转rotate、扭曲skew、缩放scale和移动translate以及矩阵变形matrix。 transform: rotate | scale | skew | translate |matrix; 我们同时对一个元素进行transform的多种属性操作，例如rotate、scale...
CSS3中设置3D变形的transform-style属性详解
09-24
CSS3是层叠样式表（Cascading Style Sheets）的...总之，CSS3的transform-style属性是实现3D变换效果不可或缺的一部分，它允许开发者控制子元素在3D空间中的渲染方式，进而设计出更加生动和有趣的网页动画和交互效果。
Html-css-Animation
03-31
3. **变形（Transform）**：变形可以改变元素的位置、大小、形状等。常用的变换函数有`translate()`, `rotate()`, `scale()`等。 示例： ```css .myElement { transform: rotate(45deg) scale(1.2); } ``` 4...
#HTML5-CSS-transition-变形特效1
weixin_43097301的博客
10-08 568
变形特效1 概述   在CSS中执行变形转换的属性是CSS3属性中的 transform，能够执行“位移”、“旋转”、“缩放”、“倾斜”、“翻转”和“透视”等变形转换的设置，可以让Web页面的表现更加的“活跃”，增加页面的交互感，给用户留下更深的“印象”。但在用该属性进行设置时，特别是用于生产环境中时，一定要控制一个“度”，也就是说要避免“过度设计”，否则反而会让“印象”这一词有了贬义的意思。 t...
CSS3——3D变形 transform
流楚丶格念的博客
07-15 4687
3D变形(CSS3) transform 2d x y 3d x y z 左手坐标系 伸出左手，让拇指和食指成“L”形，大拇指向右，食指向上，中指指向前方。这样我们就建立了一个左手坐标系，拇指、食指和中指分别代表X、Y、Z轴的正方向。如下图 CSS3中的3D坐标系与上述的3D坐标系是有一定区别的，相当于其绕着X轴旋转了180度，如下图 简单记住他们的坐标： x左边是负的，右边是正的 y 上面是负的， 下面是正的 z 里面是负的， 外面是正的 rotateX() 就是沿着 x 立体旋转.
HTML5 SVG数字变形时钟特效.zip
10-10
非常实用的特效代码，可以完美运行，可以二次修改！
html中transtion属性,htmltransition属性
weixin_42415491的博客
06-04 585
css3的-webkit–animation动画执行后会变回原来的样保留住动画的最后状态2113，在animation后面加上forwards就可5261以了代码如下：4102 -webkit-animation{animations 1s ease 1 forwards} 注意：动画如果只执行一次，1653通过css无法办到，可以把动画结束时的样式写入一个class中。css3平滑过渡效果怎么让...
HTML translate 属性
lio-zero 的博客
02-08 1499
HTML 标准规定，默认情况下，所有 HTML 元素都处于启用翻译的状态，这意味着它们的文本内容和一些属性(包括 alt 和 placeholder)在页面本地化时将被翻译。通过将 translate 属性设置为 no，网页可以将特定 HTML 元素的这种状态更改为 no-translate。 WHATWG 博客写道：默认情况下，所有内容都可以翻译。您可以通过将 translate 属性设置为 ...
逆战小白提升日記——css3 transform位移在复合写法中所受影响
vitasAA的博客
02-23 552
css3 transform属性主要所影响的值主要有以下几种，旋转rotate，扭曲skew，缩放scale，和移动translate。而在复合写法时translate的位置不同，其最终实现效果也会受影响，其影响原理是什么呢？废话不多说， 看图↓ ↓ ↓ 黑色块分别右移400px，200px 上图红色块：transforms：scale（2）translateX（200px）下图红色块：tran...
html transform属性,CSS3 transform 属性详解
weixin_31981135的博客
06-04 390
Transform 属性css3 中 transfrom 属性用户元素空间位置的变换。本文结果中展示的画面都是基于下图进行的变换二维变换Matrix3x3 的变换矩阵对二维向量进行转换其中 x1、y1 为经过 Matrix 转换后的向量。由公式可知，Matrix 中 e, f 主要用于设置元素在 X轴和 Y轴上的平移。a, d 主要用于设置元素在 X轴和 Y轴上的缩放。a,b,c,d 用于设置元素...
前端css中的transform(转换)的使用
小蜗牛764号的博客
04-22 3088
css中transform的属性虽然有多个，其实弄懂了平移（translate）、旋转（rotate）、缩放（scale）、倾斜（skew），后面的那些关于3d效果以及综合变换（如：平移+旋转+缩放等，自由组配）的属性就是这些前面4种效果的延伸和拓展。在3d的效果下/* 保留 3D 效果 */通常要添加，不然程序有些时候达不到预期的3d视图效果，只显示2d状态效果。通常设置于元素的父集中。此外，倾斜通常用于2d状态的变换，对于类似倾斜的3d的效果通常由rotate实现。
Css属性transform详解（变形、旋转、缩放）
最新发布
宝子的博客
05-17 6470
1.变形就是指通过css来改变元素的形状或位置 2.变形不会影响到页面的布局(不会脱离文档流) 3.平移元素，百分比是相对于自身计算的1.通过旋转可以使用元素沿着x y 或 z旋转指定的角度(transform)
【CSS3】transfrom 的使用
Superman_H的博客
08-25 3043
CSS3 transfrom:1. transfrom的特点2. transfrom的属性值2.1 平移 translate2.2 旋转 rotate2.3 缩放 scale2.4 倾斜 skew3. transform-origin:3.1 属性值4. transfrom的复合写法 1. transfrom的特点 不会脱离文档流，即不会影响页面的布局 可以优化动画的性能 2. transfrom的属性值 用于改变元素的形态 2.1 平移 translate translate(x, y)
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值