图片与文字翻转效果
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>
注意: 镜像翻转以轴为镜像,普通旋转以点为镜像;