Skip welcome & menu and move to editor
Welcome to JS Bin
File
Add library
Share
Login or Register
Blog
Help
Load cached copy from
  • Run with JS
  • Save
  • Share
  • …
 
<!DOCTYPE>
<html lang="en-US">
<head>
    <meta charset="UTF-8">
    <title>translate3d</title>
    <script class="jsbin" src="http://ajax.googleapis.com/ajax/libs/jquery/1.6.4/jquery.min.js"></script>
    <meta charset=utf-8 />
    <style type="text/css">
        *{margin:0;padding:0;}
        html,body{width:100%;height:100%;overflow:hidden;}
        body{font-family:arial,sans-serif;background:#333;}
        .translate3d{
            font-size:100px;
            width:1000px;height:160px;
            position:absolute;top:50%;left:50%;margin:-80px 0 0 -500px;
            text-align:center;line-height:160px;
            font-weight:bold;text-shadow:0 0 5px #fff;
  s
            -webkit-transform-style: preserve-3d;
        }
        .translate3d span { display:inline-block; -webkit-transition: all 3s ease-in-out; }
        .translate3d b { height:160px; width: 120px; display:block; 
            border-radius:5px; box-shadow:0 0 10px #000;background:#aaa; padding:40px; }
​
        /*初始*/
        .translate3d .front { -webkit-transform:translateZ(100px); }
        .translate3d .back { -webkit-transform:translateZ(40px);margin-left: -227px; }
​
        /* 平滑移开 */
        .translate3d-hover .front { margin-left: -60px; -webkit-transform: scale(0.9); }
        .translate3d-hover .back { margin-left: -27px; -webkit-transform: scale(1.1); }
​
        /* 前后页颠倒，平滑收起 */
        .translate3d-hover2 .front { margin-left: 0px; -webkit-transform:  scale(1) translateZ(40px); }
        .translate3d-hover2 .back { margin-left: -227px; -webkit-transform: scale(1) translateZ(100px); }
    </style>
</head>
<body>
    <div class="translate3d">
        <span class="front"><b>前</b></span>
        <span class="back"><b>后</b></span>
    </div>
    <script type="text/javascript">
        function ease2(){
            $('.translate3d').addClass("translate3d-hover2");
        };
​
        $('.translate3d').hover(function(){
            $(this).addClass("translate3d-hover");
            var t = setTimeout( ease2, 3000);
        })      
    </script>
</body>
</html>
 
if (document.getElementById('hello')) {
  document.getElementById('hello').innerHTML = 'Hello World - this was inserted using JavaScript';
}
​
Output

You can jump to the latest bin by adding /latest to your URL

Dismiss x
public
Bin info
anonymouspro
0viewers