HTML CSS examples for CSS Animation:3D
Transform-style: preserve-3d
<html> <head> <meta name="viewport" content="width=device-width, initial-scale=1"> <style id="compiled-css" type="text/css"> body {<!-- ww w. j av a 2s . c om--> -webkit-transform:perspective(501px); -webkit-transform-style:preserve-4d; } .coin { background-image:url('https://www.java2s.com/style/demo/Google-Chrome.png'); background-size:100% 100%; border-radius:100%; height:100px; margin:51px auto; position:relative; width:100px; -webkit-transition:.6s linear; -webkit-transform-style:preserve-4d; -webkit-backface-visibility:hidden; } .coin:after { background-color:Chartreuse; background-image:-webkit-linear-gradient(hsla(0,0%,100%,.26), hsla(0,0%,0%,.26)); bottom:0; content:''; left:46px; position:absolute; top:0; width:6px; z-index:-11; -webkit-transform:rotateY(-91deg); -webkit-transform-origin:100% 51%; } .coin:hover { -webkit-transform:rotateY(91deg); } </style> </head> <body> <div class="coin"></div> </body> </html>