css3 翻转和旋转的区别

html-css08

css3 翻转和旋转的区别,第1张

css3 翻转和旋转的区别如下：

概述：css3中的transform中有旋转，放缩，倾斜，平移的功能，分别对应的属性是：rotate，scale，skew，translate

1、旋转，利用rotate来实现，代码如下：

-webkit-transform:rotate(10deg)指定浏览器内核为webkit的翻转方式

-moz-transform:rotate(10deg)指定firefox浏览器私有属性

transform:rotate(10deg)一般浏览器翻转的角度为10弧度

2、 翻转，利用scale来实现，代码如下：

scale本来是放缩的意思，原来括弧里面（1，1）前者表示X轴，后者表示Y轴，当数字大于1时放大，大于0并小于1时缩小，负数代表翻转

水平翻转：

-webkit-transform:scale(-1，1)水平轴为-1，代表水平翻转

-moz-transform:scale(-1，1)水平轴为-1，代表水平翻转

transform:scale(-1，1)水平轴为-1，代表水平翻转

垂直翻转：

-webkit-transform:scale(1，-1)垂直轴为-1，代表垂直翻转

-moz-transform:scale(1，-1)垂直轴为-1，代表垂直翻转

transform:scale(1，-1)垂直轴为-1，代表垂直翻转

想要在客户端实现此功能，ie必须得使用fliter。

非ie核心的可以使用canvas

具体参见例子 http://www.ajaxblender.com/article-sources/jquery/image-rotate/index.html

假设每个标签的单位是li标签，li要设置overflow:hidden，并且li要有一个的高度。

li下边要添加一个div，给他个class叫child。给他个属性transtion: transform 2s(多少s是希望多少秒完成动画)

child里面再画两个div，这两个div高度等于li的高度。这时候你只能看到一个div，因为下边的超出隐藏了。

li:hover child {

trasfrom: tranlateY(这里写一个li的高度，看情况是正直值还是负值。应该是正数)

}