图片和文字翻转效果

菇毒

2024-05-10 帮助1人

1. rotateY与rotateX 翻转效果

在网页设计的过程中，有时候需要对文字或图形进行翻转；
下面介绍几种翻转的方法：

1.1 rotateY（水平镜像翻转）

rotateY 输入能让图片或文字水平镜像翻转；
例子1：使用 rotateY 属性翻转文字和图片

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>rotateY(水平镜像翻转)</title>
		<style>
		.ab{
			transform: rotateY(180deg); /* 翻转180° */
		}
		</style>
	</head>
	<body>
		<div style="width: 300px;height: 350px;">
			翻转前<img src="6.gif" alt="">
			翻转后<img src="6.gif" alt="" class="ab">
			翻转前<p>123456789</p>
			翻转后<p class="ab">123456789</p>
		</div>
	</body>
</html>

学新通

1.2 rotateX（垂直镜像翻转）

rotateX 属性能让文字或图片垂直镜像翻转；
例子2：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>rotateX(垂直镜像翻转)</title>
		<style>
		
		.ab{
			transform: rotateX(180deg); /* 垂直翻转180° */
		}
		</style>
	</head>
	<body>
		<div style="width: 300px;height: 350px;">
			翻转前<img src="6.gif" alt="">
			翻转后<img src="6.gif" alt="" class="ab">
			翻转前<p>123456789</p>
			翻转后<p class="ab">123456789</p>
		</div>
	</body>
</html>

学新通

2. 翻转效果（方法二）

2.1 水平镜像翻转

-webkit-transform和transform 的 scaleX( ) 属性都能对文字或图片进行水平镜像翻转；
scaleX( ) 属性参数必须是负数，否则不能完成翻转；参数数字越大翻转后图形或文字就会增大多少；


 /* 水平翻转180° */
-webkit-transform: scaleX(-1);
transform: scaleX(-1);

例子 3：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>水平镜像翻转</title>
		<style>
		
		.ab{
			 /* 水平翻转180° */
			-webkit-transform: scaleX(-1);
			transform: scaleX(-1);
		}
		</style>
	</head>
	<body>
		<div style="width: 300px;height: 350px;">
			翻转前<img src="6.gif" alt="">
			翻转后<img src="6.gif" alt="" class="ab">
			翻转前<p>123456789</p>
			翻转后<p class="ab">123456789</p>
		</div>
	</body>
</html>

学新通

2.2 垂直镜像翻转

scaleY( ) 如上的水平镜像翻转的使用方法类似；
例子 4：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>垂直镜像翻转</title>
		<style>
		
		.ab{
			 /* 垂直翻转180° */
			-webkit-transform: scaleY(-1);
			transform: scaleY(-1);
		}
		</style>
	</head>
	<body>
		<div style="width: 300px;height: 350px;">
			翻转前<img src="6.gif" alt="">
			翻转后<img src="6.gif" alt="" class="ab">
			翻转前<p>123456789</p>
			翻转后<p class="ab">123456789</p>
		</div>
	</body>
</html>

学新通
注意： 镜像翻转以轴为镜像，普通旋转以点为镜像；

这篇好文章是转载于：学新通技术网

图片和文字翻转效果

1. rotateY与rotateX 翻转效果

1.1 rotateY（水平镜像翻转）

1.2 rotateX（垂直镜像翻转）

2. 翻转效果（方法二）

2.1 水平镜像翻转

2.2 垂直镜像翻转

photoshop保存的图片太大微信发不了怎么办

word里面弄一个表格后上面的标题会跑到下面怎么办

《学习通》视频自动暂停处理方法

photoshop扩展功能面板显示灰色怎么办

Android 11 保存文件到外部存储，并分享文件

微信公众号没有声音提示怎么办

excel下划线不显示怎么办

excel打印预览压线压字怎么办

TikTok加速器哪个好免费的TK加速器推荐

怎样阻止微信小程序自动打开