★文章内容学习来源：拉勾教育大前端就业集训营

3D 转换

  • transform 属性不止能实现 2D 转换，也可以制作 3D 立体转换效果，比普通的 x、y 轴组成 的平面效果多了一条 z 轴，如下图：
  • 本文目录如下：

一、透视属性

1.应用背景：
  • 电脑显示屏是一个 2D 平面，图像之所以具有立体感（3D效果），其实只是一种视觉呈现， 通过透视可以实现此目的。
  • 透视可以将一个 2D 平面，在转换的过程当中，呈现 3D 效果。
  • 透视特点：近大远小。
  • 注意：并非任何情况下需要透视效果，根据开发需要进行设置，如果需要展示 z 轴的变化， 则设置透视效果。
2.透视属性 perspective
  • 属性名：perspective
  • 作用：设置在 z 轴的视线焦点的观察位置，从而实现 3D 查看效果。
  • 属性值：像素值；
  • 数值越大，观察点距离 z 轴原点越远，图形效果越完整且接近原始尺寸。 （一般设置1000px以上）
  • 注意：透视属性需要设置给 3D 变化元素的父级。

二、3D 旋转

  • 3D旋转比2D旋转更复杂，需要分别对三个方向的旋转角度值：
属性值 说明
rotateX(angle) 定义沿着 X 轴的 3D 旋转
rotateY(angle) 定义沿着 Y 轴的 3D 旋转
rotateZ(angle) 定义沿着 Z 轴的 3D 旋转
  • 注意：属性值的角度区分正负；
  • 正数表示沿对应坐标轴顺时针方向旋转，负数表示沿对应坐标轴逆时针方向旋转。
1.1 举例(3D 旋转-rotateX(angle))
<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>1.1 举例(3D 旋转-rotateX(angle))</title>
	<style> *{
     margin: 0; padding: 0; } .box{
     width: 250px; height: 200px; border: 1px solid red; margin: 50px; perspective: 1000px; /* 透视，设置给3D变化元素的父级 */ } .box img{
     width: 250px; height: 200px; transition: all 1s ease; /*过渡属性，让动画运动方式可控 */ } .box img:hover {
     /*鼠标悬浮则沿X轴顺时针旋转60deg */ transform: rotateX(60deg); } </style>
</head>
<body>
	<div class="box">
		<img src="samoye.jpg" alt="">
	</div>
</body>
</html>

1.2 举例(3D 旋转-rotateY(angle))
.box img:hover {
        /*鼠标悬浮则沿Y轴顺时针旋转60deg */
     transform: rotateY(60deg);
}

1.3 举例(3D 旋转-rotateZ(angle)
.box img:hover {
     /*鼠标悬浮则沿Z轴顺时针旋转60deg */
     transform: rotateZ(60deg);
}

三、 3D 位移

  • 类似的，位移也分为三个方向的移动；
  • 属性值：属性值为像素值或百分比，正负表示位移的方向；
  • 正值向对应轴的正方向移动，负值向对应轴的负方向移动。
属性值 说明
translateX(x) 设置 X 轴的位移值
translateY(y) 设置 Y 轴的位移值
translateZ(z) 定义3D位移，设置Z轴的位移值
1.1 举例(3D 位移-translateX(x)）
<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>1.1 举例(3D 位移-translateX(x)）</title>
	<style> *{
     margin: 0; padding: 0; } .box{
     width: 250px; height: 200px; border: 1px solid red; margin: 50px; perspective: 50000px; /* 透视，设置给3D变化元素的父级 */ } .box img{
     width: 250px; height: 200px; transition: all 1s ease; /*过渡属性，让动画运动方式可控 */ } .box img:hover {
     /*鼠标悬浮,则沿X轴正方向移动60px */ transform: translateX(60px); } </style>
</head>
<body>
	<div class="box">
		<img src="samoye2.jpg" alt="">
	</div>
</body>
</html>

1.2举例(3D 位移-translateY(y)）
.box img:hover {
     /*鼠标悬浮,则沿Y轴正方向移动60px */
	transform: translateY(60px);
}

1.3 举例(3D 位移-translateZ(z)）
.box img:hover {
    /*鼠标悬浮,则沿Z轴正方向移动70px */
	transform: translateZ(70px);
}

四、transform-style属性

  • 用于：设置被嵌套的子元素在父元素的 3D 空间中显示，子元素会保留自己的 3D 转换坐标轴。
  • 属性值：
    ①flat：所有子元素在 2D 平面呈现 （默认）；
    ②preserve-3d：保留 3D 空间 。
  • 3D 元素构建是指某个图形是由多个元素构成的，可以给这些元素的父元素设置 transform-style: preserve-3d;，来使其变成一个真正的 3D 图形。
  • 一般来说，该属性设置给 3D 变换图形的父级元素。 
transform-style: preserve-3d;

五、3D 正方体案例

<html>
     <head>
            <title>正方体特效</title>
            <style> .box {
     width: 200px; height: 200px; margin: 200px auto; } .stage {
     position: relative; width: 200px; height: 200px; perspective: 50000px; transition: all 4s ease; transform-style: preserve-3d; } .stage:hover {
     transform: rotateX(360deg) rotateY(360deg) ; } .stage div {
     position: absolute; left: 0; top: 0; width: 200px; height: 200px; font: bold 80px/200px "arial"; text-align: center; } .stage div:nth-child(1) {
     background-color: rgba(0,255,0,0.3); transform: translateZ(100px); } .stage div:nth-child(2) {
     background-color: rgba(255,0,0,0.3); transform:rotateX(90deg) translateZ(100px); } .stage div:nth-child(3) {
     background-color: rgba(0,0,255,0.3); transform: rotateX(180deg) translateZ(100px); } .stage div:nth-child(4) {
     background-color: rgba(0,255,255,0.3); transform:rotateX(270deg) translateZ(100px); } .stage div:nth-child(5) {
     background-color: rgba(255,255,0,0.3); transform:rotateY(90deg) translateZ(100px); } .stage div:nth-child(6) {
     background-color: rgba(255,0,255,0.3); transform:rotateY(-90deg) translateZ(100px); } </style>
     </head>
     <body>
           <div class="box">
                   <div class="stage">
                            <div>1</div>
                            <div>2</div>
                            <div>3</div>
                            <div>4</div>
                            <div>5</div>
                            <div>6</div> 
                   </div>
           </div>
     <body>
</html>

六、浏览器兼容

  • Internet Explorer 10、Firefox 以及 Opera 支持 transform 属性。
  • Chrome 和 Safari 需要前缀 -webkit-。
  • Internet Explorer 9 需要前缀 -ms-。

下篇继续：
【46】CSS3 （4）——新增属性④动画