直播带货源码，图片与文字翻转效果

直播带货源码，图片与文字翻转效果

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>

​

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>

 

以上就是直播带货源码，图片与文字翻转效果， 更多内容欢迎关注之后的文章

 

posted @ 2022-11-21 14:06  云豹科技-苏凌霄  阅读(187)  评论(0)    收藏  举报