码迷,mamicode.com
首页 > Web开发 > 详细

css3-3d

时间:2015-05-02 16:34:29      阅读:157      评论:0      收藏:0      [点我收藏+]

标签:

学完css3-3d变化有两个星期了,最近忙点其他的事,一直忘了写博客。本人系属前端攻城的新手,很多不懂的地方希望得到帮助。

3d变换首先要知道的这是哪个属性

transform-style(preserve-3d) 建立3D空间//在需要进行3d变换的dom元素上加这个属性

Perspective 景深//在整个需要进行3d变换的包裹层设置景深,表示从多远处看向这里

Perspective- origin 景深基点//表示看的方向,例如  -webkit-perspective-origin:left center;

 

3d变换可以分为x,y,z三个方向的变化

rotateX(),scaleX(),translateZ().

进行3d变换时,注意要设置对应的变换基点

-webkit-transform-origin: center center -50px;

 

animation动画:

@-webkit-keyframes move
{
0%{
width:100px;
}
100%
{
width:500px;
}
}
.box{-webkit-animation:3s move infinite linear; width:200%;-webkit-animation-direction:reverse;}

 

写的很粗略,感觉心里想的写不出来,边用边学吧

 

css3-3d

标签:

原文地址:http://www.cnblogs.com/toodeep/p/4472100.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!