darkcms
دوشنبه 11 شهریور 1392, 13:21 عصر
با سلام و درود.
بفرمایید :
<!doctype html>
<html>
<head>
<script>
function f(){
document.getElementById("a").style.webkitTransform="rotateY(180deg) translate(-600px,0)";
document.getElementById("b").style.webkitTransition="opacity 0.2s";
document.getElementById("a").style.transform="rotateY(180deg) translate(-600px,0)";
document.getElementById("b").style.transition="opacity 0.2s";
document.getElementById("b").style.opacity="0";
document.getElementById("c").style.webkitTransition="opacity 1s";
document.getElementById("c").style.transition="opacity 1s";
document.getElementById("c").style.opacity="1";
}
function z(){
document.getElementById("a").style.webkitTransform="rotateY(360deg)";
document.getElementById("b").style.webkitTransition="opacity 0.7s";
document.getElementById("a").style.transform="rotateY(360deg)";
document.getElementById("b").style.transition="opacity 0.7s";
document.getElementById("b").style.opacity="1";
document.getElementById("c").style.webkitTransition="opacity 0.5s";
document.getElementById("c").style.transition="opacity 0.5s";
document.getElementById("c").style.opacity="0";
}
function f1(){
document.getElementById("a1").style.webkitTransform="rotateY(180deg) translate(-600px,0)";
document.getElementById("b1").style.webkitTransition="opacity 0.2s";
document.getElementById("a1").style.transform="rotateY(180deg) translate(-600px,0)";
document.getElementById("b1").style.transition="opacity 0.2s";
document.getElementById("b1").style.opacity="0";
document.getElementById("c1").style.webkitTransition="opacity 1s";
document.getElementById("c1").style.transition="opacity 1s";
document.getElementById("c1").style.opacity="1";
}
function z1(){
document.getElementById("a1").style.webkitTransform="rotateY(360deg)";
document.getElementById("b1").style.webkitTransition="opacity 0.7s";
document.getElementById("a1").style.transform="rotateY(360deg)";
document.getElementById("b1").style.transition="opacity 0.7s";
document.getElementById("b1").style.opacity="1";
document.getElementById("c1").style.webkitTransition="opacity 0.5s";
document.getElementById("c1").style.transition="opacity 0.5s";
document.getElementById("c1").style.opacity="0";
}
</script>
<style>
#a{-webkit-transition:-webkit-transform 1s; transition:transform 1s;}
#a1{-webkit-transition:-webkit-transform 1s; transition:transform 1s;}
</style>
</head>
<body>
<div onmouseover="f()" onmouseout="z()" style=" margin-left:100px; margin-top:50px; height:150px; width:750px; border:brown 1px hidden; background-color:#cda867; border-radius:15px;"><img src="cam.png" style="position:relative;width:130px; margin-top:5px; margin-left:10px;" id="a"><div style="float:right; font:50pt tahoma;" id="b">salam</div>
<div style="border:1px solid; width:300px; height:100px; position:relative; bottom:120px; left:30px; opacity:0;" id="c">عکسهای زیبای </div>
</div>
<div onmouseover="f1()" onmouseout="z1()" style=" margin-left:100px; margin-top:50px; height:150px; width:750px; border:brown 1px hidden; background-color:#cda867; border-radius:15px;"><img src="cam.png" style="position:relative;width:130px; margin-top:5px; margin-left:10px;" id="a1"><div style="float:right; font:50pt tahoma;" id="b1">salam</div>
<div style="border:1px solid; width:300px; height:100px; position:relative; bottom:120px; left:30px; opacity:0;" id="c1">عکسهای زیبای </div>
</div>
</body>
</html>
به امید فردایی بهتر!:لبخندساده: