HTML CSS3中 2D、3D效果【笔记整理】

写网页特效的时候,涉及到2D、3D动画效果,不管是单词还是一些方法及属性,都不是很清楚,所以整理一下笔记

一、CSS3 2D转化

CSS3 转换可以对元素进行移动、缩放、转动、拉长或拉伸。

为了兼容不同版本的浏览器,要增加前缀

 

  -webkit-transform: rotate(30deg) /* Safari and Chrome */;
  -moz-transform: rotate(30deg) /* Firefox */;
  -ms-transform: rotate(30deg) /* IE 9 */;
  -o-transform: rotate(30deg)/* opera */;
  transform: rotate(30deg);

 

transrorm的方法有:translate() rotate() scale() skew() matrix()

1、translate() 方法 根据左(X轴)和顶部(Y轴)位置给定的参数,从当前元素位置移动。

eg: translate(50px,100px)是从左边元素移动50个像素,并从顶部移动100像素。

2、rotate() 方法 在一个给定度数顺时针旋转的元素。负值是逆时针旋转元素。

eg: rotate(30deg) 元素顺时针旋转30度。

3、scale() 方法 该元素增加或减少的大小,取决于宽度(X轴)和高度(Y轴)的参数:

eg: scale(2,3)转变宽度为原来的大小的2倍,和其原始大小3倍的高度。

4、skew() 方法  

   语法:

transform:skew( [,]);

包含两个参数值,分别表示X轴和Y轴倾斜的角度,如果第二个参数为空,则默认为0,参数为负表示向相反的方向倾斜。

  • skewX();表示只在X轴(水平方向)倾斜。
  • skewY();表示只在Y轴(垂直方向)倾斜。

5、matrix() 方法和2D变换方法合并成一个。

     maxtrix方法有个参数,包含旋转、缩放、移动(平移)和倾斜功能。

    一般来说,原点默认为元素的中心点,但是也可以通过 transform-origin:50% 50%; 这里的50% 50%表示的就是中心默认的位置。

二、CSS3 3D转化

     transrorm属性就是分别针对x,y,z进行设置。3d的坐标系,x轴在屏幕上为水平方向,y轴为垂直方向,而z轴为垂直于屏幕的方向。

  HTML CSS3中 2D、3D效果【笔记整理】_第1张图片

 

 CSS3中的3D变换主要包括以下几个功能函数:

  1. 3D位移:包括translateZ()和translate3d();
  2. 3D旋转:包括rotateX()、rotateY()、rotateZ()和rotate3d();
  3. 3D缩放:包括scaleZ()和scale3d();
  4. 3D矩阵:matrix3d();

 1、translateZ()和translate3d()

    translateZ(z) 让元素沿着Z轴进行位移,当z为负值的时候,元素在Z轴越来越远。

translate3d(tx,ty,tz)

 

  • tx:代表横向坐标位移向量的长度;
  • ty:代表纵向坐标位移向量的长度;
  • tz:代表Z轴位移向量的长度。此值不能是一个百分比值,如果取值为百分比值,将会认为无效值。

 2、rotateX()、rotateY()、rotateZ()和rotate3d()

div{transform: rotateX(30deg);transform: rotateY(30deg);transform: rotateZ(30deg);}

    rotateX(30deg)是围绕X轴进行旋转30度,(deg)是度数。 相同的 rotateY(30deg)是围绕Y轴进行旋转30度,rotateZ(30deg)是围绕Z轴进行旋转30度。

    rotate3d(x,y,z,a) 

     x(y)(z)取值为0~1的数值,用来描述元素围绕X(Y)(Z)轴旋转的矢量值;  

            a:是一个角度值,主要用来指定元素在3D空间旋转的角度,如果其值为正值,元素顺时针旋转,反之元素逆时针旋转。

 3、scaleZ()和scale3d()

        即3D缩放。当scale3d()中x轴和Y轴同为1,即scale3d(1,1,sz),其效果等同于scaleZ(sz)。

 

    4、matrix3d()

  matrix3d(sx, 0, 0, 0, 0, sy, 0, 0, 0, 0, sz, 0, 0, 0, 0, 1) 

三、 CSS3 过渡 

  1. transition 简写属性,用于在一个属性中设置四个过渡属性。
  2. transition-property 规定应用过渡的 CSS 属性的名称。
  3. transition-duration 定义过渡效果花费的时间。默认是 0。
  4. transition-timing-function 规定过渡效果的时间曲线。默认“ease”
  5. transition-delay 规定过渡效果何时开始。默认是 0。
 transition-property: width;
 transition-duration: 1s;
 transition-timing-function: linear;
transition-delay: 2s;

 

  简写:

transition: width 1s linear 2s;

 四、CSS3  动画

    @keyframes规则是创建动画。 @keyframes规则内指定一个CSS样式和动画将逐步从目前的样式更改为新的样式。当在 @keyframes 创建动画,把它绑定到一个选择器,否则动画不会有任何效果。

 请用百分比来规定变化发生的时间,或用关键词 "from" 和 "to",等同于 0% 和 100%。

 

    0% 是动画的开始,100% 是动画的完成。

 @keyframes 规定动画。

 animation 所有动画属性的简写属性,除了 animation-play-state 属性。

    animation-name 规定 @keyframes 动画的名称。

 animation-duration 规定动画完成一个周期所花费的秒或毫秒。默认是 0。

 animation-timing-function 规定动画的速度曲线。默认是 "ease"。

   animation-fill-mode 规定当动画不播放时(当动画完成时,或当动画有一个延迟未开始播放时),要应用到元素的样式。

 animation-delay 规定动画何时开始。默认是 0。

 animation-iteration-count 规定动画被播放的次数。默认是 1。

   animation-direction 规定动画是否在下一周期逆向地播放。默认是 "normal"。

 animation-play-state 规定动画是否正在运行或暂停。默认是 "running"。

@keyframes myfirst
{
    0%   {background: red; left:0px; top:0px;}
    25%  {background: yellow; left:200px; top:0px;}
    50%  {background: blue; left:200px; top:200px;}
    75%  {background: green; left:0px; top:200px;}
    100% {background: red; left:0px; top:0px;}
}

div
{
    animation-name: myfirst;
    animation-duration: 5s;
    animation-timing-function: linear;
    animation-delay: 2s;
    animation-iteration-count: infinite;
    animation-direction: alternate;
    animation-play-state: running;
}

简化:
div
{
    animation: myfirst 5s linear 2s infinite alternate;
}

 基础知识就到这里,还是需要多加练习,正所谓“熟能生巧” 。

 

  

 

 

 

 

 

 

转载于:https://www.cnblogs.com/ling-nl/p/10757014.html

你可能感兴趣的:(HTML CSS3中 2D、3D效果【笔记整理】)