"3D Doraemon"
Bootstrap 4.1.1 Snippet by harunpehlivan

Post to Facebook Tweet this

<link href="//maxcdn.bootstrapcdn.com/bootstrap/4.1.1/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css"> <script src="//maxcdn.bootstrapcdn.com/bootstrap/4.1.1/js/bootstrap.min.js"></script> <script src="//cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script> <!------ Include the above in your HEAD tag ----------> <!DOCTYPE html> <html> <head> <title>3D Doraemon Cube</title> </head> <body> <div class="wrap"> <div class="cube"> <div class="front"><img alt="doraemon_1" src="https://cdn-cms.f-static.com/uploads/1017556/800_5ac2115f911f3.jpg"></div> <div class="back"><img alt="doraemon_2" src="https://cdn-cms.f-static.com/uploads/1017556/400_5aade1f55d888.png"></div> <div class="top"><img alt="doraemon_3" src="https://cdn-cms.f-static.com/uploads/1017556/2000_5b222d5a787fd.jpg"></div> <div class="bottom"><img alt="doraemon_4" src="https://cdn-cms.f-static.com/uploads/1017556/2000_5b2230e1ab99e.jpg"></div> <div class="left"><img alt="doraemon_5" src="https://cdn-cms.f-static.com/uploads/1017556/2000_5b53aeec70dad.jpg"></div> <div class="right"><img alt="doraemon_6" src="https://cdn-cms.f-static.com/uploads/1017556/800_5aca4ec48ebbc.png"></div> </div> </div> </body> </html>
body { background: #000; } .wrap { margin-top: 150px; perspective: 1000px; perspective-origin: 50% 50%; } .cube { margin: auto; position: relative; height: 300px; width: 300px; transform-style: preserve-3d; } .cube div { position: absolute; box-sizing: border-box; height: 100%; width: 100%; opacity: 0.9; background-color: #fff; color: #ffffff; } .cube div img { height: 100%; width: 100%; } .front { transform: translateZ(200px); } .back { transform: translateZ(-100px) rotateY(180deg); } .right { transform: rotateY(-270deg) translateX(100px); transform-origin: top right; } .left { transform: rotateY(270deg) translateX(-100px); transform-origin: center left; } .top { transform: rotateX(-270deg) translateY(-100px); transform-origin: top center; } .bottom { transform: rotateX(270deg) translateY(100px); transform-origin: bottom center; } @keyframes rotate { from { transform: rotateX(0deg) rotateY(0deg); } to { transform: rotateX(360deg) rotateY(360deg); } } .cube { animation: rotate 24s infinite linear; } .wrap:active .front { transform: translateZ(300px); } .wrap:active .back { transform: translateZ(-150px) rotateY(180deg); } .wrap:active .right { transform: rotateY(-270deg) translateZ(100px) translateX(100px); } .wrap:active .left { transform: rotateY(270deg) translateZ(100px) translateX(-100px); } .wrap:active .top { transform: rotateX(-270deg) translateZ(100px) translateY(-100px); } .wrap:active .bottom { transform: rotateX(270deg) translateZ(100px) translateY(100px); } .cube div { transition: transform 0.2s ease-in; }
alert("HARUN PEHLİVAN IT FOUNDER CEO BLOGGER INITIATIVE AR-GE HP IT GROUP GLOBAL PROFESYONEL IT GROUP");

Related: See More

Paper Kit 2 PRO

Questions / Comments: