前言：
当前兄弟们对“css点击图片旋转”大致比较看重，我们都想要剖析一些“css点击图片旋转”的相关资讯。那么小编在网络上网罗了一些关于“css点击图片旋转””的相关文章，希望咱们能喜欢，各位老铁们一起来了解一下吧！<!DOCTYPE html><html><head><meta charset="UTF-8" /><title>Document</title><style type="text/css">body{ background: #f14849;}div{ position: relative; width: 300px; height: 300px; margin:100px auto;}div img{ position: absolute; top:0; left:0; transition:all 1s; backface-visibility:hidden;}/*1、先把背面(bg01)的图片，先翻转180deg 隐藏2、鼠标移入，让前面(bg02)的图片，翻转180deg 隐藏3、再让bg01 翻转回0deg*/div img:nth-of-type(1){transform:rotateY(180deg);} div:hover img:nth-of-type(2){ transform:rotateY(180deg);}div:hover img:nth-of-type(1){ transform:rotateY(0deg);}</style></head><body><div><img src="img/bg01.png" ><img src="img/bg02.png" ></div></body></html>图片规格: 300px * 300px
版权声明：
本站文章均来自互联网搜集，如有侵犯您的权益，请联系我们删除，谢谢。
标签： #css点击图片旋转
