HTML5:七天学会基础动画网页7

CSS3高级特效

2D转换方法

移动:translate()

旋转:rotate()

缩放:scale()

倾斜:skew()

属性:transform

作用:对元素进行移动,旋转,缩放,倾斜。

2D移动

设定元素从当前位置移动到给定位置(x,y)

方法                      说明

translate(x,y)    2D转换 沿X轴和Y轴移动元素

translateX(n)     沿X轴移动元素

translateY(n)     沿Y轴移动元素

(因为代码是从上到下开始生效，最后这两个只能生效一个，上面的会被下面的覆盖)

例:我们随便给一个div

 <style>

        *{

            margin: 0;

            padding: 0;

        }

    .big{

        width: 100px;

        height: 100px;

        background-color: pink;

    }

   

   

   

  给一个坐标

   

   

 如果只给一个值

transform: translate(100px）就只作用于x轴

参照点:元素本身左上角为原点，不脱离标准流

x:正值向原点的右边平移，负值左边。

y:正值向原点的下边平移，负值上边。

旋转

设定元素顺时针旋转给定的角度，负值表示逆时针旋转，默认以容器的中心为原点旋转

语法:transform:rotate(ndeg);

如何改变旋转原点:

 transform-origin: x轴距离，y轴距离；

此时以坐标(x,y)为圆心旋转

也可以使用transform-origin: top left；定义以左上角为旋转原点，同理——右下:bottom right；右上:top right；………

例子:

 

   

   

 我们可以放开想象，对一些有想法的元素设置放置鼠标发生变化，当然我们会发现这个变化过程非常快，我们后面会引入动画解决这一问题，接下来还会了解缩放和倾斜