CSS 3D效果

一、动画效果

1、Transform属性

Transform属性应用于元素的2D或3D转换。这个属性允许你将元素旋转,缩放,移动,倾斜等。
有了这个属性,接下来就是设置动画的时间和动画的表现形式啦。

2、animation动画属性

语法:

animation:( animation-name   animation–duration    animation-timing-function  animation-delay  animation-iteration-count    animation-direction)

下面让我们来看一下,这些值分别代表什么意思:

说明
animation-name 

由@keyframes创建的动画名称

 animation–duration  动画需要多少秒完成
 animation-timing-function

过渡方式(linear、ease、ease-in、ease-out、ease-in-out)

animation-delay

延迟时间

animation-iteration-count 

动画的播放次数(值通常为整数,默认值为1;特殊值infinite,表示动画无限次播放)

animation-direction

动画的播放方向(normal:动画每次都是循环向前播放;alternate:动画播放为偶数次则向前播放)


下面用一个小练习演示一下:

小气球

代码如下:

CSS 3D效果_第1张图片


 二、3D效果

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

1、translate3d (X,Y,Z)分别表示x轴距离,y轴距离和z轴距离;但是也可以单独设置translateZ

translate

CSS 3D效果_第2张图片


2、rotateX:rotateX是绕着X轴旋转,正值是向上面旋转,负值是向下面旋转

rotateY: rotateY是绕着Y轴旋转,正值是向右边旋转,负值是向左边旋转

rotateZ:tateZ是绕着Z轴旋转,正值是绕着中心点顺时针旋转,负值是绕着中心点逆时针旋转

旋转

CSS 3D效果_第3张图片


3、transform-sty

如果想让子元素有3D效果,必须给父元素设置transform-style属性

设置旋转后的上下位置,给子元素设置transform-origin属性

穿透

CSS 3D效果_第4张图片

你可能感兴趣的:(css3)