javascript - 您知道以 0 到 90 度之间的 Angular 实现菜单栏的网站吗？

Question

我被要求实现一个既不是水平也不是垂直的菜单栏。以下是两个示例按钮:

这对我来说是新事物，所以为了学习如何完成这项工作，我正在寻找一个使用类似菜单栏的网站(或者更好的是教程)。有什么想法吗？

Answer 1

你应该看看这里

http://www.useragentman.com/blog/2010/03/09/cross-browser-css-transforms-even-in-ie/

或者像这样使用

更新:

/* for firefox, safari, chrome, etc. */
-webkit-transform: rotate(-90deg);
-moz-transform: rotate(-90deg);
/* for ie */
filter: progid:DXImageTransform.Microsoft.BasicImage(rotation=3);
/* for opera */
-o-transform: rotate(-90deg);

查看示例 http://jsbin.com/ajoqe/4

更新:2

或者使用这个扩展

通用 CSS 转换:旋转(免费扩展):http://www.dmxzone.com/go?17422#Overview

* Pure CSS based - No Flash required! 
* Fully cross browser compatible - The Universal CSS Transforms: Rotate

is a jQuery based, build only with HTML & CSS - no Flash what so ever! It even supports IE6 next to the other major browsers. * Search engine friendly – The Universal CSS Transforms: Rotate is pure HTML and CSS based and generates search engine friendly HTML code that can be nicely indexed by all search engines and web spiders.

更新 3

或者使用这个 http://code.google.com/p/jquery-rotate/

Two JavaScript image handling implementations are supported:

1. using DXImageTransform filter for Microsoft Internet Explorer
2. using Canvas object for other browsers

The library has been tested with:

* Mozilla FireFox 2.0.0.2
* Internet Explorer 7.0
* Opera 9.1 (note Opera 8 is not supported)