视频加载中...
实当代码：
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title></title> <style type="text/css"> ul { /取消ul的默认样式/ list-style: none; margin: 90px auto; width: 800px; } ul li { width: 120px; height: 50px; float: left; position: relative; /设置子元素显示办法为3d/ transform-style: preserve-3d; /设置旋转的过渡效果/ transition: transform 1s; } li a { position: absolute; / 取消工具中的文本的装饰，取消a链接的默认下划线 / text-decoration: none; / 设置工具中内容的水平对齐办法 / text-align: center; / 设置工具的行高 / line-height: 50px; color: #ffffff; top: 0; left: 0; width: 100%; height: 100%; } / 设置第一个子元素 / li a:first-child { / 移动 / transform: translateZ(25px); / 背景颜色 / background-color: #ff3f2d; } / 设置末了一个子元素 / li a:last-child { background-color: #9700fc; / 旋转、移动 / transform: rotateX(-90deg) translateZ(25px); } li:hover { / 绕X轴旋转 / transform: rotateX(90deg); } </style></head><body> <ul> <li> <a href="#">今日头条</a> <a href="#">@曾也疯</a> </li> <li> <a href="#">西瓜视频</a> <a href="#">@曾也疯</a> </li> <li> <a href="#">抖音</a> <a href="#">@曾也疯</a> </li> <li> <a href="#">番茄小说</a> <a href="#">@曾也疯</a> </li> <li> <a href="#">@曾也疯</a> <a href="#">@曾也疯</a> </li> </ul></body></html>
