1、立体汉字：旋转点left，attr(data-cont)可获取自定义属性值，skewY（倾斜转换）参考地址
2、旋转导航：先移动后旋转，li标签需要延迟执行旋转
注意：:hover事件触发自己的:afert伪元素事件中间是没有空格的
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <style> * { padding: 0; margin: 0; } body { text-align: center; background-color: #EBE6E6; } /*汉字*/ .characters { margin-top: 150px; } .characters > span { display: inline-block; width: 80px; height: 80px; font: 500 60px/80px "Microsoft YaHei"; text-align: center; position: relative; transform-style: preserve-3d; } .characters > span::before, .characters > span::after { content: attr(data-cont); position: absolute; top: 0; left: 0; width: 100%; height: 100%; color: white; transform-origin: left; transform: scale(0.96, 1); transition: all 1s; } .characters > span::before { color: #ccc; } .characters:hover span::after { transform: rotateY(-35deg); } .characters:hover span::before { /*倾斜*/ transform: rotateY(-15deg) skewY(15deg); } /*导航*/ .nav { width: 420px; height: 30px; margin: 50px auto; transform-origin: bottom; } ul { list-style: none; } li { float: left; transform-style: preserve-3d; position: relative; width: 60px; height: 30px; transform: rotateX(0deg); transition: all 0.8s; } li > span { position: absolute; width: 100%; height: 100%; top: 0; left: 0; text-align: center; font: 400 15px/30px "Microsoft YaHei"; } li > span:nth-child(1) { background-color: green; transform: translateZ(15px); } li > span:nth-child(2) { background-color: yellow; transform: translateY(-15px) rotateX(90deg); } .nav:hover li { transform: rotateX(-90deg); } li:nth-child(2) { transition-delay: 0.1s; } li:nth-child(3) { transition-delay: 0.2s; } li:nth-child(4) { transition-delay: 0.3s; } li:nth-child(5) { transition-delay: 0.4s; } li:nth-child(6) { transition-delay: 0.6s; } li:nth-child(7) { transition-delay: 0.8s; } </style> </head> <body> <div class="characters"> <span data-cont="安">安</span> <span data-cont="徽">徽</span> <span data-cont="省">省</span> <span data-cont="图">图</span> <span data-cont="书">书</span> <span data-cont="馆">馆</span> </div> <div class="nav"> <ul> <li> <span>第一</span> <span>第二</span> </li> <li> <span>第一</span> <span>第二</span> </li> <li> <span>第一</span> <span>第二</span> </li> <li> <span>第一</span> <span>第二</span> </li> <li> <span>第一</span> <span>第二</span> </li> <li> <span>第一</span> <span>第二</span> </li> <li> <span>第一</span> <span>第二</span> </li> </ul> </div> </body> </html>
