CSS3 3D transform 变换

Author: 刘老师(Aaron Lau) 武汉长乐教育,武汉PHP培训课程,版权所有,转载请注明!

CSS3 3D transform 变换

课程概要

  1. 基础概念
  2. 详细讲解

CSS3的3D变换, 有一定难度...

1. 基础概念

transform-style:flat(默认,二维效果) / preserve-3d(三维效果)。

translate3d(x,y,z) 使元素在这三个纬度中移动,也可以分开写,如:translateX(length),translateY(length), translateZ(length)。注意z轴的值只能为px;

scale3d(number,number,number) 使元素在这三个纬度中缩放,也可分开写,如:scaleX(),scaleY(),scaleY()。

rotateX(angle) 是元素依照x轴旋转;

rotateY(angle) 是元素依照y轴旋转;

rotateZ(angle) 是元素依照z轴旋转。

perspective(length) 景深, 就是你在多远的地方观看.

2. 详细讲解

猛击这里

案例展示

上一篇课程 下一篇课程

学生登录