如何用CSS+HTML实现图片上下翻转

html-css022

如何用CSS+HTML实现图片上下翻转,第1张

想要在客户端实现此功能,ie必须得使用fliter。

非ie核心的可以使用canvas

具体参见例子 http://www.ajaxblender.com/article-sources/jquery/image-rotate/index.html

可以用控制div的显现的方式。可以用js。

举个列子:

<html>

<head>

<meta http-equiv="Content-Type" content="text/htmlcharset=gb2312" />

<title>div显现与隐藏</title>

<script language="JavaScript" type="text/JavaScript">

<!--

function toggle(targetid){

if (document.getElementById){

target=document.getElementById(targetid)

if (target.style.display=="block"){

target.style.display="none"

} else {

target.style.display="block"

}

}

}

-->

</script>

<style type="text/css">

<!--

#div1{

background-color:#000000

height:400px

width:400px

display:none

}

-->

</style>

</head>

<body>

<input type="button" id="butn" value="显示/隐藏" onclick="toggle('div1')" />

<center>

<div id="div1"></div></center>

</body>

</html>

我把核心给你写好了,剩下的就靠你自己装饰一下了。比如把div夸大到全屏,该div 内容等。。

有,不过这个"时代"还需要等待,因为所有浏览器还没有真正的支持,可以用的有ie9以上、Chrome以及Safari、火狐等支持html5的浏览器,一下是针对body对应的代码:

body{

-webkit-transform: scaleX(-1) /*webkit内核的,比如chrome等*/

-moz-transform:scaleX(-1)/*火狐的*/

}

你可以试一试,浏览器需要完全支持,总有那么一天的事,还需等待。