CSS过渡中的变形效果中的平移translate,旋转,rotate,倾斜,skew怎么搞啊?

html-css017

CSS过渡中的变形效果中的平移translate,旋转,rotate,倾斜,skew怎么搞啊?,第1张

"推荐你个系列的教程吧--《Buid New World》第十一集:使用 CSS 增加过渡和其他效果 平移translate,将元素平行移动,参数中分别指定水平方向上的移动距离与垂直方向上的移动距离。

旋转,rotate允许你通过传一个角度值来旋转一个元素。

如果设置的值为正数表示顺时针旋转,如果设置的值为负数,则表示逆时针旋转。

倾斜,skew可以将一个对象围绕着x和y轴按照一定的角度倾斜,在参数中分别指定水平方向上的倾斜角度与垂直方向上的倾斜角度。

"

css实现斜角原理:

把border进行旋转:

border: 2px solid #FFF

-webkit-transform: rotate(204deg)

预览效果页面:

http://each.sinaapp.com/game/index.html