css怎么实现简单3d动画效果

html-css021

css怎么实现简单3d动画效果,第1张

主要是用CSS3里的animation和translate3d来做的。

给你找了个例子，方便理解：http://www.cnblogs.com/axes/p/3520299.html

你也可以上ITJOB的官网看看

你是要在 不同的时间内 执行两个动画 我这有个例子 你看下

#div61{

background-color:#CC9966

height:155px

width:155px

animation:dong 7s ease-in-out 0s 1 normal

-moz-animation:dong 7s ease-in-out 0s 1 normal

-webkit-animation:dong 7s ease-in-out 0s 1 normal

-o-animation:dong 7s ease-in-out 0s 1 normal

}

@keyframes dong{

0%{

transform:rotateX(0deg)

}

30%{

transform:rotateX(120deg)

}

70%{

background-color:#CC9966

}

100%{

background-color:red

}

}

用火狐 或则 360 看下 我没去 搞 兼容 百度有 兼容的属性

animation实现动画由俩个部分组成，通过类似flash动画的关键帧来申明一个动画，在animation属性中调用关键帧声明的动画实现一个更为复杂的动画效果

关键帧 例如：

调用关键帧：

语法 animation:animation-name animation-duration animation-timing-function  animation-delay animation-iteration-count animation-direction

animation-name 由 @keyframes 创建的动画名称

animation-duration过渡时间

animation-timing-function过渡方式

animation-delay延迟时间

animation-iteration-count 动画的播放次数 通常值为1次 特殊值infinite为无限播放

animation-direction动画的播放方向，alternate为偶数次向前播放，normal动画每次都是循环向前播放

练习如下：

该图形的变化从左上角到右上角来回跳动的一个过程

linear  规定以相同速度开始至结束的过渡效果

ease  规定慢速开始，然后变快，然后慢速结束的过渡效果（默认值）

ease-in 规定以慢速开始的过渡效果

ease-out  规定以慢速结束的过渡效果

ease-in-out 规定以慢速开始和结束的过渡效果

 perspective:500px透视 也可以理解为视距，可以理解为 你的眼睛距离物体的距离  距离物体越近 物体就越大，距离物体越远 物体就越小

transform: rotateZ(30deg) rotateZ是绕着z轴旋转 正值是顺时针旋转 负值是逆时针旋转

transform: rotateY(30deg) rotateY是绕着y轴旋转 正值是向里面旋转 负值是向外面旋转

transform: rotateX(30deg)rotateX是绕着x轴旋转 正值是向里面旋转 负值是向外面旋转

transform: rotate(30deg)参数a取正值时元素相对原来中心顺时针旋转

 transform: translate3d(0, 0, 200px)效果如下:

 translate3d(0,0,200px) 表示z轴向前移动二楼200px（近大远小的原理）

 translate3d 里面分别表示x轴距离 y轴距离 和z轴距离

 要想实现3d效果必须要在父元素上加上一个属性perspective

如果想让子元素有3d的效果 必须要给父元素设置transform-style，默认值是flat， 想变成3d效果要把值设置成preserve-3d

也可以 设置旋转后的div的上下位置，在.b:hover里面加上transform-origin：top/bottom/left/right