（28）css3 3D转换

最新推荐文章于 2022-12-25 15:46:06 发布

泽哥ins

最新推荐文章于 2022-12-25 15:46:06 发布

阅读量404

点赞数

分类专栏： CSS3 文章标签： css3 3d css

本文链接：https://blog.csdn.net/qq_36213140/article/details/121967678

版权

CSS3 专栏收录该内容

53 篇文章 5 订阅

订阅专栏

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

一、透视

电脑显示屏是一个 2D 平面，图像之所以具有立体感（3D效果），其实只是一种视觉呈现，通过透视可以实现此目的。透视可以将一个 2D 平面，在转换的过程当中，呈现 3D 效果。透视特点：近大远小。例如：当我们站在山的脚下看山，山会给我们的视觉效果看起来特别大，当我哦我们站在山的远处观看山，山给我们的视觉效果看起来特别小，这就是所谓的近大远小。注意：并非任何情况下需要透视效果，根据开发需要进行设置，如果需要展示 z 轴的变化，则设置透视效果。

1.1透视属性 perspective

属性名：perspective

作用：设置在 z 轴的视线焦点的观察位置，从而实现 3D 查看效果。

属性值：像素值，数值越大，观察点距离 z 轴原点越远，图形效果越完整且接近原始尺寸。注意：透视属性需要设置给 3D 变化元素的父级，而不是透视元素的本身，因为我们要站在父元素的角度进行观看子元素的透视效果。

1.2 3D 旋转

3D旋转比2D旋转更复杂，需要分别对三个方向的旋转角度值：

注意：属性值的角度区分正负，正数表示沿对应坐标轴顺时针方向旋转，负数表示沿对应坐标轴逆时针方向旋转.

3D旋转示例

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>css3—3D转换</title>
  <style>
    body,div,img {
      margin: 0;
      padding: 0;
    }
    .box {
      width: 450px;
      height: 300px;
      border: 1px solid #000;
      margin: 50px auto;
      perspective: 1000px;
    }
    .box img {
      width: 450px;
      height: 300px;
      transition: all 1s ease 0s;
    }
    .box:hover img{
      /* 我们只能设置一个方向的旋转，如果设置多条transform属性后写的会层叠先写的 */
      transform: rotateX(60deg);
      transform: rotateY(60deg);
      transform: rotateZ(60deg);
    }
  </style>
</head>
<body>
  <div class="box">
    <img src="images/1.jpg" alt="">
  </div>
</body>
</html>

1.3 3D 位移

类似的，位移也分为三个方向的移动：属性值：

注意：属性值为像素值或百分比，正负表示位移的方向。正值向对应轴的正方向移动，负值向对应轴的负方向移动。

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>css3—3D转换</title>
  <style>
    body,div,img {
      margin: 0;
      padding: 0;
    }
    .box {
      width: 450px;
      height: 300px;
      border: 1px solid #000;
      margin: 150px auto;
      perspective: 1000px;
    }
    .box img {
      width: 450px;
      height: 300px;
      transition: all 1s ease 0s;
    }
    .box:hover img{
      /* 我们只能设置一个方向的位移，如果设置多条transform属性后写的会层叠先写的 */
      transform: translateX(100px);
      transform: translateY(100px);
      transform: translateZ(100px);
    }
  </style>
</head>
<body>
  <div class="box">
    <img src="images/1.jpg" alt="">
  </div>
</body>
</html>

1.4 3D转换之位移和转换合并书写

我们的transform属性3D效果也可以同时设置位移和旋转,但是先后书写顺序有差异,多个书写值之间使用空格进行分隔.我们先位移后旋转的视觉效果会变大，而反过来，先旋转后位移它没有办法再向左或者右移动，只能向盒子内部进行移动。

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>css3—3D转换</title>
  <style>
    body,div,img {
      margin: 0;
      padding: 0;
    }
    .box {
      width: 450px;
      height: 300px;
      border: 1px solid #000;
      margin: 150px auto;
      perspective: 1000px;
    }
    .box img {
      width: 450px;
      height: 300px;
      transition: all 1s ease 0s;
      /* 我们的transform属性3D效果也可以同时设置位移和旋转,但是先后书写顺序有差异,多个书写值
      之间使用空格进行分隔.我们先位移后旋转的视觉效果会变大，而反过来，先旋转后位移它没有办法
      再向左或者右移动，只能向盒子内部进行移动 */
      /* transform: translateX(100px) rotateY(60deg); */
      transform: rotateY(60deg) translateX(100px);
    }
    /* .box:hover img{
      
    } */
  </style>
</head>
<body>
  <div class="box">
    <img src="images/1.jpg" alt="">
  </div>
</body>
</html>

泽哥ins

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
打赏
0
评论
（28）css3 3D转换

transform 属性不止能实现 2D 转换，也可以制作 3D 立体转换效果，比普通的 x、y 轴组成的平面效果多了一条 z 轴，如下图：一、透视电脑显示屏是一个 2D 平面，图像之所以具有立体感（3D效果），其实只是一种视觉呈现，通过透视可以实现此目的。透视可以将一个 2D 平面，在转换的过程当中，呈现 3D 效果。透视特点：近大远小。例如：当我们站在山的脚下看山，山会给我们的视觉效果看起来特别大，当我哦我们站在山的远处观看山，山给我们的视觉效果看起来特别小，这就是所谓的近大远小。.
复制链接

扫一扫