.test{width:200pxheight:100pxline-height:100pxtext-align:centerborder:1px solid #000transition:all 1s}
.test:hover{transform:rotateY(180deg)}
</style>
<div class="test">把鼠标放上来</div>
css可以通过perspective属性来实现。ps可以直接通过滤镜中的翻转效果实现。对于ps，首先打开Photoshop，导入需要编辑的图片，用选取工具选定图片，在工具栏中打开滤镜效果，选择反转效果即可。对于css，css实现翻转效果的方法，首先创建一个演示方块，并为其添加transition和transform属性，然后将transition属性添加到需要翻转的p上，最后添加perspective和transform-style属性即可。
<html><title>js实现按钮控制图片90度翻转特效</title>
<body>
<script language="javascript">
var isIE = (document.uniqueID)?1:0
var i=1
function rotate(image)
{
var object = image.parentNode
if(isIE){
image.style.filter="progid:dXImagetransform.Microsoft.basicImage(rotation="+i+")"
i++
if(i>4) {i=1}
}
else{
try{
var canvas = document.createElement('canvas')
if(canvas.getContext("2d")) {
object.replaceChild(canvas,image)
var context = canvas.getContext("2d")
context.translate(300, 0)
context.rotate(Math.PI*0.5)
context.drawImage(image,0,0)
}
}catch(e){}
}
}
</script>
<input type="button" value="点击旋转图片" onclick="rotate(document.getElementById('myimg'))" /><br />
<img id="myimg" src="1.jpg"/>
<!-- 图片路径你自己替换 -->
</body>
</html>
