效果预览在当前页面点击右侧的“点击预览”按钮进行预览，点击链接即可全屏预览。https://codepen.io/comehop??e/pen/qJEdKb互动视频本视频为互动视频，您可以随时暂停视频，编辑视频中的代码。请使用chrome、safari、edge打开观看。https://scrimba.com/p/pEgDAM/cEJRKud源码下载日常前端实战系列完整源码请到github下载：https://github.com/comehop??e/front-end-daily-挑战代码解释定义dom，容器是一个无序列表，包含4个元素代表4个按钮：
- home
- products
- services
- contact
居中显示：body{margin:0;高度：100vh；显示：弹性；对齐项目：居中；证明内容：居中；background:cornsilk;}去掉列表项前面的符号：ul{padding:0;list-style-type:none;}设置按钮边框和背景的样式，背景使用渐变色，但渐变方向交替：ulli{box-sizing:border-box;宽度：15em；高度：3em；字体大小：20px；边界半径：0.5em；边距：0.5em；box-shadow:001emrgba(0,0,0,0.2);}ulli:nth-child(odd){background:linear-gradient(toright,orange,tomato);}ulli:nth-child(even){background:linear-gradient(toleft,orange,tomato);}设置按钮上文字的样式，依次交替Leftorright:ulli{color:white;字体系列：无衬线；文本转换m：大写；line-height:3em;}ulli:nth-child(odd){text-align:left;padding-left:10%;}ulli:nth-child(even){text-align:right;padding-right:10%;}设置按钮的透视效果，依次向左旋转和向右旋转，透视距离为500px。注意perspective()函数和rotateY()函数的顺序不能颠倒：ulli:nth-child(odd){transform:perspective(500px)rotateY(45deg);}ulli:nth-child(even){transform:perspective(500px)rotateY(-45deg);}给按钮添加悬停效果，将悬停时的透视距离缩短为200px，透视距离越短，旋转范围看起来越大：ulli:nth-child(odd):hover{transform:perspective(200px)rotateY(45deg);padding-left:5%;}ulli:nth-child(even):hover{transform:perspective(200px)rotateY(-45deg);padding-right:5%;}最后设置一个缓动时间，让效果过渡平滑：ulli{transition:0.3s;cursor:pointer;}大功告成！
