1、通过CSS3的@font-face属性引入本地字体
2、调用自定义的字体
3、设置3D舞台布景
4、给3D舞台布景设置过渡动画效果
5、给不是当前状态的3D舞台的悬浮与聚焦状态设置变形效果
6、给3D舞台中“.three-d-box”设置过渡与变形效果
7、给导航设置3D前，与3D后变形效果
8、设置导航当前状态与悬浮状态下的背景效果
9、显示下拉导航菜单，并其设置一个变形效果
提示1：
使用@font-face引入本地字体，本地字体的路径为：
http://www.w3cplus.com/demo/css3/3DAnimationDropdownMenu
同时提供自定义字体：
“sansation_regular-webfont.eot”、“sansation_regular-webfont.woff”、“sansation_regular-webfont.ttf”和“sansation_regular-webfont.svg”
提示2：
通过font-family调用自定义的字体名“sansationregular”。
提示3：
在元素”.three-d”上使用“perspective”给元素设置3D舞台布景，并且将其值设置为”200”
提示4：
通过transition给3D舞台设置过渡动画，设置的参数为所有属性“all”,过渡时间持续“0.07s”，使用的过渡函数为“linear”。
提示5：
给不是当前状态的3D舞台的悬浮与聚焦状态设置旋转效果，也就是“.three-d:not(.active):hover”和“.three-d:not(.active):focus”状态下的“.three-d-box”设置z轴位移“-25px”，X轴旋转“90deg”。
提示6：
给3D舞台中的“.three-d-box”元素设置过渡效果，并且对其Z设置一个“-25px”旋转。
提示7：
在.front”元素上设置X轴的旋转，旋转度为0，同时给Z轴位移25px。另外给“.back”元素上设置X轴的旋转，旋转度为-90deg，同时Z轴位移25px。
提示8：
通过CSS的渐变与背景尺寸实现导航当前状态与悬浮状态下的斑纹背景效果。
请验证，完成请求
由于请求次数过多，请先验证，完成再次请求
打开微信扫码自动绑定
绑定后可得到
使用 Ctrl+D 可将课程添加到书签
举报
实战
实战
实战
实战
实战
