使用CSS转换旋转元素
对于CSS缺乏进展,以及JavaScript和浏览器专用CSS都试图推动web设计的发展,我已经滔滔不绝了。我们喜欢的浏览器特定的CSS属性之一是CSS转换。CSS转换允许我们在360度轴上旋转元素。旋转元素也是轻而易举的事——看看吧。
Mozilla CSS
-moz变换:旋转(120度);
CSS属性表示为仅限Mozilla前缀为“-moz”。可以将图元旋转任意度数。您还可以使用“moz-transform-origin”属性设置变换的原点:
-moz变换:旋转(120度)-moz变换:倾斜(25度)平移(150px);
WebKit CSS
-webkit转换:旋转(120度);
显然网络工具包使用“-webkit”前缀。然而,转换语法是相同的。WebKit发起的CSS转换;Mozilla实现了WebKit标准。
歌剧CSS
-o变换:旋转(120度);
Opera使用其标准o(o)-
前缀属性来表示转换。
Internet Explorer CSS
Microsoft已实施-毫秒
转换的前缀:
-ms-变换:旋转(120度);
上面的CSS片段在IE9中运行良好,但IE8和更低版本需要一些滤波器
魔法:
过滤器:progid:DXImageTransform。微软。基本图像(旋转=1.5);
不幸的是,这些过滤器非常不精确,不会可靠地旋转。
仅此而已。CSS转换并不新鲜,但每隔一段时间对其进行一次检查是很好的。到目前为止,我还没有在生产项目中使用CSS转换。也许你有一个现代CSS转换使用的好例子可以分享?
*注意:我确实注意到WebKit在支持旋转iFrame方面存在问题。Mozilla做得很好。
我的2013 Mozilla峰会之旅令人难以置信。我花了太多时间专注于我的项目,以至于我忽略了所有Mozillian人所做的伟大工作。MozSummit完美地提醒了我的同事们有多聪明,以及他们有多。。。
使用CSS边界半径,我向您展示了CSS如何通过向元素添加圆角来弥合设计和开发之间的差距。CSS渐变是朝着这个方向迈出的另一步。现在,Internet Explorer 8+、Firefox、Safari和Chrome都支持CSS渐变。。。
为任何网站增添活力的一个好方法是实现以图像或幻灯片内容为特色的幻灯片。当然,有很多可用的幻灯片放映插件,但如果你想在没有控件或事件的情况下进行简单的幻灯片放映,其中许多插件可能会被过度使用。
我最近正在从事一个项目,该项目的特色是可以通过键盘导航的表格,因此很明显可以通过传统方式使用单元格大纲tabIndex=0
元素轮廓是用户快速智能导航的重要组成部分。不幸的是,我遇到了Firefox 3.6的错误。。。