图片与文字翻转效果

菇毒

已于 2022-07-14 11:39:10 修改

阅读量1.4k

点赞数

于 2022-07-13 23:50:57 首次发布

本文链接：https://blog.csdn.net/weixin_43960383/article/details/125773604

版权

web 前端学习同时被 2 个专栏收录

90 篇文章 4 订阅

订阅专栏

CSS

34 篇文章 1 订阅

订阅专栏

图片与文字翻转效果

1. rotateY与rotateX 翻转效果
1.1 rotateY（水平镜像翻转）
1.2 rotateX（垂直镜像翻转）
2. 翻转效果（方法二）
2.1 水平镜像翻转
2.2 垂直镜像翻转

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>

20220523

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>

20220523

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>

20220523

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>

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

菇毒

关注

0
点赞
踩
4

收藏

觉得还不错? 一键收藏
0
评论
图片与文字翻转效果

@toc在网页设计的过程中，有时候需要对文字或图形进行翻转；下面介绍几种翻转的方法：rotateY 输入能让图片或文字水平镜像翻转；例子1：使用 rotateY 属性翻转文字和图片rotateX 属性能让文字或图片垂直镜像翻转；例子2：和的属性都能对文字或图片进行水平镜像翻转；属性参数必须是负数，否则不能完成翻转；参数数字越大翻转后图形或文字就会增大多少；例子 3：如上的水平镜像翻转的使用方法类似；例子 4：注意：镜像翻转以轴为镜像，普通旋转以点为镜像；......
复制链接

扫一扫

专栏目录