<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>CSS3 3D折叠翻转文字动画DEMO演示</title> <meta name="viewport" content="width=600"> <link rel="stylesheet" href="css/style.css" media="screen" type="text/css" /> </head> <body> <p> <span data-text="3">3</span> <span data-text="D">D</span> <span data-text="折">折</span> <span data-text="叠">叠</span> <span data-text="字">字</span> <span data-text="体">体</span> </p> </body> </html>
html,body{margin:0;padding:0;height:100%;} body{ display:-webkit-flex; display:-ms-flexbox; display:flex; -webkit-align-items:center; -ms-flex-align:center; align-items:center; -webkit-justify-content:center; -ms-flex-pack:center; justify-content:center; background-color:#684da3; } p{color:#fff;font-size:4em;font-weight:bold;font-family:"微软雅黑";} p span { display:inline-block; position:relative; -webkit-transform-style:preserve-3d; transform-style:preserve-3d; -webkit-perspective:500; perspective:500; -webkit-font-smoothing:antialiased; } p span::before, p span::after { display:none; position:absolute; top:0; left:-1px; -webkit-transform-origin:left top; -ms-transform-origin:left top; transform-origin:left top; -webkit-transition:all ease-out 0.3s; transition:all ease-out 0.3s; content:attr(data-text); } p span::before { z-index:1; color:rgba(0,0,0,0.2); -webkit-transform:scale(1.1, 1) skew(0deg, 20deg); -ms-transform:scale(1.1, 1) skew(0deg, 20deg); transform:scale(1.1, 1) skew(0deg, 20deg); } p span::before, p span::after { display:block; } p span::after { z-index:2; color:#684da3; text-shadow:-1px 0 1px #684da3, 1px 0 1px rgba(0,0,0,0.8); -webkit-transform:rotateY(-40deg); transform:rotateY(-40deg); } p span:hover::before { -webkit-transform:scale(1.1, 1) skew(0deg, 5deg); -ms-transform:scale(1.1, 1) skew(0deg, 5deg); transform:scale(1.1, 1) skew(0deg, 5deg); } p span:hover::after { -webkit-transform:rotateY(-10deg); transform:rotateY(-10deg); }