Advertisement
Not a member of Pastebin yet?
Sign Up,
it unlocks many cool features!
- <html>
- <head>
- <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
- <script>
- $(document).ready(function(){
- $("#button_left").click(function(){
- $("section").toggleClass("rotate-left");
- });
- });
- </script>
- <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
- <script>
- $(document).ready(function(){
- $("#button_right").click(function(){
- $("section").toggleClass("rotate-right");
- });
- });
- </script>
- <style>
- .wrap {
- perspective: 800px;
- perspective-origin: 50% 100px;
- }
- .cube {
- margin: 0 auto;
- position: relative;
- width: 200px;
- transform-style: preserve-3d;
- }
- .cube div {
- box-shadow: inset 0 0 20px rgba(125,125,125,0.9);
- position: absolute;
- width: 200px;
- height: 200px;
- }
- .back {
- background: rgba(40,40,40,0.8);
- transform: translateZ(-100px) rotateY(180deg);
- }
- .right {
- background: rgba(189,25,400,0.3);
- transform: rotateY(-270deg) translateX(100px);
- transform-origin: top right;
- }
- .left {
- background: rgba(189,25,400,0.3);
- transform: rotateY(270deg) translateX(-100px);
- transform-origin: center left;
- }
- .top {
- background: rgba(189,25,400,0.3);
- transform: rotateX(-90deg) translateY(-100px);
- transform-origin: top center;
- }
- .bottom {
- background: rgba(189,25,400,0.3);
- transform: rotateX(90deg) translateY(100px);
- transform-origin: bottom center;
- }
- .front {
- background: rgba(189,25,400,0.3);
- transform: translateZ(100px);
- }
- @keyframes spin_left {
- from { transform: rotateY(0); }
- to { transform: rotateY(-90deg); }
- }
- .rotate-left {
- animation: spin_left 1s 1 linear;
- }
- @keyframes spin_right {
- from { transform: rotateY(0); }
- to { transform: rotateY(90deg); }
- }
- .rotate-right {
- animation: spin_right 1s 1 linear;
- }
- </style>
- </head>
- <body>
- <br><br><br><br><br><br><br><br><br><br>
- <div class="wrap">
- <section class="cube">
- <div class="front">Hello</div>
- <div class="back"></div>
- <div class="top"></div>
- <div class="bottom"></div>
- <div class="left"></div>
- <div class="right"></div>
- </section>
- </div>
- <input type="button" value="<--" id="button_left">
- <input type="button" value="-->" id="button_right">
- </body>
- </html>
Advertisement
Add Comment
Please, Sign In to add comment
Advertisement