怎样用CSS实现图片翻转

 我来答
很多游戏
高粉答主

2019-10-30 · 游戏精通者,攻略技能点满
很多游戏
采纳数:91 获赞数:386972

向TA提问 私信TA
展开全部

以实现一张图片双面翻转为例:

方法一:

1、实现CSS样式的方法代码如下。

2、实现前端布局的方法代码如下。


3、实现图片翻转CSS样式代码如下。

方法二:

1、实现正反面效果的HTML的方法代码如下。

2、实现CSS样式的方法代码。


3、然后实现竖向翻转的方法代码如下。

博思aippt
2024-07-20 广告
博思AIPPT是基于ai制作PPT的智能在线工具,它提供了4种AI制作PPT的方式,包括AI生成大纲、AI直接生成PPT、文本生成PPT、AI提炼文档生成PPT,一站式集成多种AI生成PPT的方式,可满足办公用户的不同需求和使用场景。ai生... 点击进入详情页
本回答由博思aippt提供
jiaozhuangfei
推荐于2017-12-15 · TA获得超过698个赞
知道小有建树答主
回答量:316
采纳率:100%
帮助的人:268万
展开全部
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title></title>
    <style type="text/css">
        *{margin: 0; padding: 0;}
        #box{width: 300px; height: 300px; margin: 0 auto; background-color: lightgreen; position: relative;}
        #inner{width: 100%; height: 100%; transform: rotateX(45deg); background-color: pink;}
    </style>
</head>
<body>
<div id="box">
    <div id="inner"></div>
</div>
</body>
</html>

transform中的rotate是旋转,scale是缩放,skew是倾斜,由于没有把style设置为3d,所以看不出效果,只是看着小了,其实它是按照x轴翻转了45度的效果。

本回答被网友采纳
已赞过 已踩过<
你对这个回答的评价是?
评论 收起
一生江湖一声笑
2018-06-03
知道答主
回答量:4
采纳率:0%
帮助的人:3400
展开全部
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>

<style>
img{
margin: 100px auto;
transition:all 2s;
}
img:hover{
transform: rotatey(180deg); /*以y轴为中心旋转*/
}
</style>
<body>
<img src="" alt=""><!--放图片-->
</body>
</html>
已赞过 已踩过<
你对这个回答的评价是?
评论 收起
收起 1条折叠回答
推荐律师服务: 若未解决您的问题,请您详细描述您的问题,通过百度律临进行免费专业咨询

为你推荐:

下载百度知道APP,抢鲜体验
使用百度知道APP,立即抢鲜体验。你的手机镜头里或许有别人想知道的答案。
扫描二维码下载
×

类别

我们会通过消息、邮箱等方式尽快将举报结果通知您。

说明

0/200

提交
取消

辅 助

模 式