<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html""; charset=""gb2312" />
<title>無標題文檔</title>
<style type="text/css">
div{
width: 553px;
height: 343px;
border:1px solid #000;
perspective: 500px;
}
div img{
/*all 旋轉過渡時間 ease 旋轉前等待時間*/
transition:all 1s ease 0s;
}
div img cur{
/*all 旋轉過渡時間 ease 旋轉前等待時間*/
transform:rotateY（30deg）translateZ(300px);
}
input{
/*防止按鈕被擋住，所以要有z-index值，記住只有定位的元素才有z-index值*/
position: relative;
z-index: 1000;
}
</style>
<script type="text/javascript">
window.onload = function(){
//得到按鈕
var btn = document.getElementById("btn");
//得到圖片
var img = document.getElementsByTagName("img")[0];
//監聽
btn.onclick = function(){
img.className = "cur";
//設置img的class屬性
}
}
</script>
</head>
<body>
<input type="button" value="按我" id="btn" />
<div>
<img src="images/1.jpg" alt="" class="cur"/>
</div>
</body>
</html>
css中的括號改英文狀態的，而且樣式都搞錯了。。是div img.cur，你那樣寫是cur元素了
<!DOCTYPE HTML PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html" "; charset=" "gb2312" />
<title>無標題文檔</title>
<style type="text/css">
div {
width: 553px;
height: 343px;
border: 1px solid #000;
perspective: 500px;
}
div img {
/*all 旋轉過渡時間 ease 旋轉前等待時間*/
transition: all 1s ease 0s;
}
div img.cur {
/*all 旋轉過渡時間 ease 旋轉前等待時間*/
transform: rotateY(30deg);
}
input {
/*防止按鈕被擋住，所以要有z-index值，記住只有定位的元素才有z-index值*/
position: relative;
z-index: 1000;
}
</style>
<script type="text/javascript">
window.onload = function () {
//得到按鈕
var btn = document.getElementById("btn");
//得到圖片
var img = document.getElementsByTagName("img")[0];
//監聽
btn.onclick = function () {
img.className = img.className == 'cur' ? '' : 'cur';
//設置img的class屬性
}
}
</script>
</head>
<body>
<input type="button" value="按我" id="btn" />
<div>
<img src="音圖50.jpg" alt="音圖50.jpg" />
</div>
</body>
</html>
