用css3 怎么制作菱形图片，图片是正的不旋转，新手求大神指点，最好把代码写出来，

发布网友发布时间：2022-04-06 10:53

共4个回答

热心网友时间：2022-04-06 12:23

思路: div旋转45度 img旋转-45度
html:<div class="lx"><img src="img/replace_me.jpg" alt=""></div>
css:
.lx{transform:rotate(45deg);width:400px;height:400px;overflow:hidden;vertical-align: middle;text-align: center;margin:100px auto;display:flex}
.lx img{transform:rotate(-45deg);max-width:100%;max-height:100%;}追问不行啊

热心网友时间：2022-04-06 13:41

先弄一个div菱形，在菱形div加入style:"overflow: hidden;"，然后在菱形里面放图片就行了

热心网友时间：2022-04-06 15:15

你好，
在img设置 img{-webkit-transform：rotate(45deg)；transform：rotate(45deg)；-ms-transform：rotate(45deg)；-moz-transform：rotate(45deg)；}
已经兼容浏览器了的；
希望可以帮到您！追问图片不旋转的

热心网友时间：2022-04-06 17:07

img{
transform:rotate(45deg);
}