网站首页 > 基础教程正文

26.HTML 2D和3D变换 html2d旋转

ccvgpt 2024-10-10 05:08:27 基础教程 12 ℃

在HTML5和CSS3的世界里，2D和3D变换为网页设计带来了革命性的变化。通过简单的CSS属性，我们可以实现元素的平移、旋转、缩放和倾斜等效果，从而创造出更加动态和交互性的用户体验。在本文中，我们将探索2D和3D变换的基本概念，并通过一些实例来演示它们的应用。

2D变换

2D变换是指在平面内对元素进行操作，包括平移（translate）、旋转（rotate）、缩放（scale）和倾斜（skew）。以下是一些基本的2D变换例子：

平移（Translate）

.translate-example {
  transform: translate(50px, 100px);
}

这个例子中，元素将沿X轴移动50像素，沿Y轴移动100像素。

旋转（Rotate）

.rotate-example {
  transform: rotate(45deg);
}

在这个例子中，元素将围绕其中心点旋转45度。

缩放（Scale）

.scale-example {
  transform: scale(2, 3);
}

此处，元素的宽度放大到原来的2倍，高度放大到原来的3倍。

倾斜（Skew）

.skew-example {
  transform: skew(30deg, 20deg);
}

这个例子将使元素沿X轴倾斜30度，沿Y轴倾斜20度。

3D变换

3D变换引入了新的维度，即Z轴，为元素添加了深度感。3D变换包括3D平移（translate3d）、3D旋转（rotateX/rotateY/rotateZ）、3D缩放（scale3d）等。

3D平移（Translate3D）

.translate3d-example {
  transform: translate3d(50px, 100px, 200px);
}

在这个例子中，元素沿X轴移动50像素，沿Y轴移动100像素，同时沿Z轴移动200像素，产生一种深入屏幕的效果。

3D旋转（Rotate3D）

.rotate3d-example {
  transform: rotateX(45deg);
}

这里，元素将围绕X轴旋转45度，创建出一个“翻页”的效果。

3D缩放（Scale3D）

.scale3d-example {
  transform: scale3d(2, 2, 2);
}

此例中，元素在三个维度上均放大两倍。

实战例子

让我们通过几个具体的例子来看看2D和3D变换在实际应用中的效果。

例子1：创建一个简单的卡片翻转效果（2D）

<div class="card">
  <div class="card-front">前面</div>
  <div class="card-back">背面</div>
</div>

.card {
  width: 200px;
  height: 300px;
  position: relative;
}

.card-front, .card-back {
  width: 100%;
  height: 100%;
  position: absolute;
  backface-visibility: hidden;
  transition: transform 0.6s;
}

.card-front {
  background-color: #fff;
  z-index: 2;
}

.card-back {
  background-color: #f1f1f1;
  transform: rotateY(180deg);
}

.card:hover .card-front {
  transform: rotateY(-180deg);
}

.card:hover .card-back {
  transform: rotateY(0deg);
}

当鼠标悬停在卡片上时，前面的卡片会翻转到背面。

例子2：3D旋转立方体

<div class="cube">
  <div class="face front">前</div>
  <div class="face back">后</div>
  <div class="face left">左</div>
  <div class="face right">右</div>
  <div class="face top">上</div>
  <div class="face bottom">下</div>
</div>

.cube {
  position: relative;
  width: 200px;
  transform-style: preserve-3d;
  animation: spin 5s infinite linear;
}

.face {
  position: absolute;
  width: 200px;
  height: 200px;
  background-color: rgba(255, 255, 255, 0.7);
  border: 1px solid #ccc;
}

.front  { transform: translateZ(100px); }
.back   { transform: translateZ(-100px) rotateY(180deg); }
.left   { transform: rotateY(-90deg) translateZ(100px); }
.right  { transform: rotateY(90deg) translateZ(100px); }
.top    { transform: rotateX(90deg) translateZ(100px); }
.bottom { transform: rotateX(-90deg) translateZ(100px); }

@keyframes spin {
  from { transform: rotateY(0deg); }
  to { transform: rotateY(360deg); }
}

这个立方体会在页面上无限旋转，展示了一个基本的3D效果。

示例

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>2D & 3D Transform Example</title>
<style>
  body {
    font-family: 'Arial', sans-serif;
    margin: 0;
    padding: 0;
    background: #f0f0f0;
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: column;
    min-height: 100vh;
  }

  .btn-2d {
    padding: 10px 20px;
    margin: 20px;
    background-color: #007bff;
    color: white;
    border: none;
    border-radius: 5px;
    cursor: pointer;
    outline: none;
    transition: transform 0.3s ease;
  }

  .btn-2d:hover {
    transform: rotateZ(360deg);
  }

  .card-3d {
    width: 200px;
    height: 300px;
    perspective: 1000px;
    cursor: pointer;
    margin: 20px;
  }

  .card-inner {
    width: 100%;
    height: 100%;
    transition: transform 0.6s;
    transform-style: preserve-3d;
    position: relative;
  }

  .card-3d:hover .card-inner {
    transform: rotateY(180deg);
  }

  .card-face {
    position: absolute;
    width: 100%;
    height: 100%;
    backface-visibility: hidden;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 10px;
    color: white;
    font-size: 24px;
    box-shadow: 0 4px 8px rgba(0,0,0,0.1);
  }

  .card-front {
    background: #007bff;
  }

  .card-back {
    background: #ff5722;
    transform: rotateY(180deg);
  }

  .scene {
    width: 200px;
    height: 200px;
    perspective: 600px;
    margin: 20px;
  }

  .cube {
    width: 100%;
    height: 100%;
    position: relative;
    transform-style: preserve-3d;
    transform: rotateX(-30deg) rotateY(-45deg);
    animation: rotateCube 5s infinite linear;
  }

  .face {
    position: absolute;
    width: 200px;
    height: 200px;
    background: rgba(255, 255, 255, 0.9);
    border: 1px solid #ccc;
  }

  .front  { transform: translateZ(100px); }
  .back   { transform: rotateY(180deg) translateZ(100px); }
  .right  { transform: rotateY(90deg) translateZ(100px); }
  .left   { transform: rotateY(-90deg) translateZ(100px); }
  .top    { transform: rotateX(90deg) translateZ(100px); }
  .bottom { transform: rotateX(-90deg) translateZ(100px); }

  @keyframes rotateCube {
    0% { transform: rotateX(-30deg) rotateY(-45deg); }
    100% { transform: rotateX(-30deg) rotateY(315deg); }
  }

</style>
</head>
<body>

<button class="btn-2d">Click Me!</button>

<div class="card-3d">
  <div class="card-inner">
    <div class="card-face card-front">
      Front Side
    </div>
    <div class="card-face card-back">
      Back Side
    </div>
  </div>
</div>

<div class="scene">
  <div class="cube">
    <div class="face front"></div>
    <div class="face back"></div>
    <div class="face right"></div>
    <div class="face left"></div>
    <div class="face top"></div>
    <div class="face bottom"></div>
  </div>
</div>

</body>
</html>

.btn-2d 类定义了一个按钮，当鼠标悬停时，它会应用一个 2D 旋转 (rotateZ) 动画。
.card-3d 类定义了一个 3D 翻转卡片的容器，设置了 perspective 属性，这是实现 3D 翻转效果的关键。
.card-inner 类定义了卡片的内部元素，它将在鼠标悬停时围绕 Y 轴旋转 (rotateY) 180 度，这是通过 .card-3d:hover .card-inner 选择器设置的。
.card-face 类定义了卡片的正反两面，使用了 backface-visibility 属性来在翻转时隐藏背面。
.card-front 和 .card-back 类为卡片的前后面分别设置了不同的背景颜色。
.scene 类定义了一个 3D 场景的容器，设置了 perspective 属性，以便为其中的 3D 对象创建透视效果。
.cube 类定义了正方体的容器，它使用 transform-style: preserve-3d 来保持其子元素的 3D 空间位置。这个容器还应用了一个连续旋转的动画，使正方体不断旋转。
.face 类定义了正方体的每个面，每个面都是一个绝对定位的正方形，具有边框和背景颜色。
.front、.back、.right、.left、.top 和 .bottom 类分别定义了正方体的六个面的位置，每个面都通过 translateZ 被推到其应在的位置。

结语

通过本文的介绍，我们了解了2D和3D变换的基本概念以及它们在实际应用中的一些例子。随着技术的进步，现代浏览器对这些效果的支持越来越好，而我们作为开发者，可以利用这些工具创造出更加丰富和生动的网页体验。记得在使用这些技术时保持平衡，确保它们增强而不是干扰用户的体验。

上一篇： CSS 还原拉斯维加斯球数字动画拉斯维加斯扩展
下一篇： css之3D效果——正方体 css正方体照片墙源码

网站首页 > 基础教程 正文

26.HTML 2D和3D变换 html2d旋转

2D变换

平移（Translate）

旋转（Rotate）

缩放（Scale）

倾斜（Skew）

3D变换

3D平移（Translate3D）

3D旋转（Rotate3D）

3D缩放（Scale3D）

实战例子

例子1：创建一个简单的卡片翻转效果（2D）

例子2：3D旋转立方体

示例

结语

猜你喜欢

网站首页 > 基础教程正文