CSS3--制作正方体

转载 (原文地址) tree 随笔 HTML5/CSS3 2738阅读 2014-08-29 16:17:06 举报

2D变换
transform 主要函数属性

rotate() 旋转函数 取值度数
deg 度数
Transform-origin 旋转的基点
skew() 倾斜函数 取值度数
skewX(deg)
skewY(deg)
scale() 缩放函数 取值 正数、负数和小数
scaleX()
scaleY()
translate() 位移函数
translateX()
translateY()
transform-origin:变换基点: 关键字(top/left/right/bottom)或坐标值,默认: 0, 0
transform 执行顺序问题 — 后写先执行

3d变换
transform-style:preserve-3d 建立3D空间
perspective 景深
perspective- origin 景深基点(视线的角度)
transform 新增函数
rotateX()
rotateY()
rotateZ()
translateZ()
scaleZ()

animation
关键帧——keyFrames
类似于flash
只需指明两个状态,之间的过程由计算机自动计算
关键帧的时间单位
数字:0%、25%、100%等
字符:from(0%)、to(100%)
格式
@keyframes 动画名称
{
动画状态
}
@keyframes miaov_test
{
from { background:red; }
to { background:green; }
}

代码片段 1

后面用自己很菜的animation,试试做了动画效果。360、谷歌、欧朋都可以运行,其它倒没试过。

评论 ( 5 )
最新评论
tree 4F 2014-09-09 15:52:29 5F

这个。。也没办法,现在支持css3的实在不多,所以浏览器的兼容性问题挺大的。

303625635 2F 2014-09-09 15:17:02 4F

其实我觉得这些东西挺坑的,火狐也挂了……

tree 2F 2014-09-01 22:18:20 3F

未出道的前端小菜鸟,希望能和你,还有前端网的各位一起学习分享

移花香 2014-09-01 21:09:39 2F

goog

移花香 2014-09-01 20:30:17 1F

不错