• wordpress CMS主题:ssmay主题wordpress CMS主题:ssmay主题
  • 首页 > HTML5与CSS3.0 > CSS3常规使用(7):CSS3的 变形、2D、3D效果实现

    CSS3常规使用(7):CSS3的 变形、2D、3D效果实现

    作者: 分类:HTML5与CSS3.0 点击: 66 次
    wordpress CMS主题:ssmay主题

      css3相对于css2来说,在功能上有着质的变化,css3不仅对dom新增了众多的选择器、盒模型控制、边框背景等新功能,更是新增了css实现变形效果、页面2D和3D效果,并且可以结合JS,可以实现更加炫酷的前台。

      1、transform 变换功能

      这个功能需要IE10+以上的浏览器, IE9需前缀。其它主流浏览器都支持。

      a、在水平方向、垂直方向或两个方向上平移元素。

      translate (长度值或百分数值)[trænsˈleɪt] 转化
      translateX (长度值或百分数值)
      translatY (长度值或百分数值)

      b、在水平方向、垂直方向或两个方向上缩放元素

      scale (倍数) 比例[skeɪl]
      scaleX (倍数)
      scaleY (倍数)

      c、旋转元素

      rotate (角度) [rəʊˈteɪt]

      d、在水平方向、垂直方向或两个方向上使元素倾斜一定的角度

      skew (角度)[skju:] 斜的
      skewX (角度)
      skewY (角度)

      e、指定自定义变换(矩形)

      matrix (4~6 数值,逗号隔开) [ˈmeɪtrɪks]

      案例:

      transform:scale(0.5) skew(45deg) translate(200px,150px) rotate(-50deg);
      缩小0.5,倾斜45度,水平移200px垂直移150px,旋转-50度

      2、transform-origin 指定变换的起点

      transform-origin默认是 center center ,即中心点。

      a、指定元素 x 轴或 y 轴的起点长度值 指定距离

      百分数值

      b、指定 x 轴的位置

      left
      center
      right

      c、指定 y 轴的位置

      top
      center
      bottom

      如:以左上角为基准点变形

      transform-origin: left top;
      transform-origin: 0px 0px;

      3、3D 变形 transform (x,y,z) 

      translate3d(x,y,z) 3D 方式平移元素,设置 x、y 和 z 轴
      translateZ(z) 设置 3D 方式平移元素的 z 轴

      scale3d(x,y,z) 3D 方式缩放一个元素
      scaleZ(z) 设置 3D 方式缩放元素的 z 轴

      rotate3d(x,y,z,a) 设置 3D 旋转,a 表示角度,xyz 是 0 或 1 之间的数值
      rotateX(a) 旋转元素的 x轴,直接添加度数
      rotateY(a) 旋转元素的 y轴
      rotateZ(a) 旋转元素的 z轴

      perspective(长度值) 设置一个透视投影矩阵 [pərˈspektɪv] 透视,远景,

      matrix3d(多个值) 定义一个矩阵

      例: 图片元素自身旋转

      <img src="aa.jpg" alt="" />
      <style>
      img {
      transform: perspective(500px) rotateY(45deg);
      transform-origin: left;
      }
      </style>

      4、perspective

      perspective是3D变形的重要属性,该属性会设置查看者的位置,并将可视内容映射到一个视锥上,继而投放到一个 2D 平面上。

      设置查看者的距离位置,一般设置在元素的父元素上。但元素自身也可以用。如上例

      none 默认值,表示无限的角度来看 3D 物体,但看上去是平的。
      长度值 接受一个长度单位大于 0 的值,其单位不能为百分比。值越大,角度出现的越远,就好比你人离远一点看物体。值越小,正相反。(如上案例)

      例: 在父元素 div 里, 图片平向旋转(Y)

      <div id="a">
      <img src="aa.jpg" alt="" />
      11111
      </div>
      <style>
      #a {
      margin:100px;
      perspective: 1000px;/* 这句必须添加,否则没有3D效果 */
      transform-style: preserve-3d;
      }
      img {
      /*transform: rotate3d(0,1,0,90deg); */
      /* 或者用下面这句*/
      transform:rotateY(85deg);
      /* 设置以左边为基点线旋转,不设置就是以中心旋转 */
      transform-origin: left;
      }
      </style>

      5、transform-style 指定嵌套元素如何在 3D 空间中呈现

      flat 默认值,表示所有子元素在 2D 平面呈现。
      preserve-3d 表示子元素在 3D 空间中呈现。

      一般设置到当前元素的父元素

      transform-style: preserve-3d;
      需要再配合后面的功能属性和变形配置,才能看到效果。

    文章作者:hero2018
    本文地址:http://wanlimm.com/77201807296297.html
    本文时间:2018-07-29 08:31:10
    版权所有 © 转载时必须以链接形式注明作者和原始出处!

    上一篇:
    下一篇:
    wordpress CMS主题:ssmay主题

    或许你会感兴趣的文章:

    发表评论

    电子邮件地址不会被公开。 必填项已用*标注

    This site uses Akismet to reduce spam. Learn how your comment data is processed.