<p>CSS 3D 特效在网页设计中越来越流行，通过这些特效可以为网页增加精美的视觉效果。今天我们将介绍五款实用的 CSS 3D 特效，可以让你的页面更加惊艳和吸引人。</p>
1. 3D 文字层叠效果
基本原理
<p>这个特效通过将文字转换为 3D 形式，然后在不同的位置上层叠来实现的。具体来说，我们需要使用 CSS 的 transform 属性来实现这个转换，使用 perspective 属性来设置 3D 效果的视角，使用 translate3d 属性来对文字进行位置调整。注意，这个特效只适用于块级元素（例如 div、p 等）。</p>
效果展示
<p>以下是代码和样式预览：</p> <p>
</p>
<p>.stack-text {</p>
<p> perspective: 300px;</p>
<p>}</p>
<p>.stack-text h2{</p>
<p> transform-style: preserve-3d;</p>
<p> position: relative;</p>
<p> margin: 0;</p>
<p> font-size: 50px;</p>
<p>}</p>
<p>.stack-text h2 span {</p>
<p> position: absolute;</p>
<p> top: 0;</p>
<p> left: 0;</p>
<p> transform-origin: 0 0 0;</p>
<p> transform: translate3d(0, 0, -1px);</p>
<p>}</p> <p>
</p> <p>
<p> H</p> <p> E</p> <p> L</p> <p> L</p> <p> O</p> <p>
</p> <p></p> <p>效果展示说明：在 stack-text 类中设置了 perspective 属性，这个属性可以定义 3D 效果的视角。然后我们使用 transform-style: preserve-3d 属性将文字转换为 3D 形式，在每个 span 元素上设置了不同的 translate3d 属性值，使得它们在不同的 z 轴位置出现，最终实现了层叠效果。注意，translate3d 的 z 轴值越大，文字在页面上的位置越靠后。</p>
2. 3D 立方体翻转效果
基本原理
<p>这个特效通过将一个 div 元素转换为 3D 形式，并在不同的状态下进行变换来实现。具体来说，我们需要使用 CSS 的 transform 属性来实现这个转换，使用 transition 属性来设置变换过渡效果，使用 rotate3d 属性来对元素进行旋转操作。</p>
效果展示
<p>以下是代码和样式预览：</p> <p>
</p>
<p>.cube {</p>
<p> width: 200px;</p>
<p> height: 200px;</p>
<p> position: relative;</p>
<p> margin: 100px auto;</p>
<p> transform-style: preserve-3d;</p>
<p> transition: all 1s;</p>
<p>}</p>
<p>.cube .side{</p>
<p> position: absolute;</p>
<p> width: 200px;</p>
<p> height: 200px;</p>
<p> transition: all 1s;</p>
<p> backface-visibility: hidden;</p>
<p>}</p>
<p>.cube .front {</p>
<p> background-color: #2ecc71;</p>
<p> transform: rotate3d(0, 1, 0, 0deg);</p>
<p>}</p>
<p>.cube .back {</p>
<p> background-color: #e74c3c;</p>
<p> transform: rotate3d(0, 1, 0, 180deg);</p>
<p>}</p>
<p>.cube .right {</p>
<p> background-color: #3498db;</p>
<p> transform: rotate3d(0, 1, 0, 90deg);</p>
<p>}</p>
<p>.cube .left {</p>
<p> background-color: #8e44ad;</p>
<p> transform: rotate3d(0, 1, 0, -90deg);</p>
<p>}</p>
<p>.cube .top {</p>
<p> background-color: #f1c40f;</p>
<p> transform: rotate3d(1, 0, 0, 90deg);</p>
<p>}</p>
<p>.cube .bottom {</p>
<p> background-color: #2c3e50;</p>
<p> transform: rotate3d(1, 0, 0, -90deg);</p>
<p>}</p>
<p>.cube:hover {</p>
<p> transform: rotate3d(1, 1, 0, 180deg);</p>
<p>}</p>
<p></p> <p>
</p> <p>
</p> <p>效果展示说明：我们使用了一个容器元素（cube），并将这个元素及其子元素转换为 3D 形式，使用 backface-visibility 属性隐藏了每个面的反面，然后对每个面设置了不同的颜色和旋转角度，最后使用 hover 事件将容器元素旋转 180 度，使其呈现立方体翻转效果。</p>
3. 3D 环绕效果
基本原理
<p>这个特效通过将一个 div 元素转换为 3D 形式，并绕 Y 轴旋转来实现。具体来说，我们需要使用 CSS 的 transform 属性来实现这个转换，使用 perspective 属性来设置 3D 效果的视角，使用 rotateY 属性来对元素进行旋转操作。</p>
效果展示
<p>以下是代码和样式预览：</p> <p>
</p>
<p>.container {</p>
<p> width: 300px;</p>
<p> height: 300px;</p>
<p> margin: 50px auto;</p>
<p> perspective: 800px;</p>
<p>}</p>
<p>.card {</p>
<p> width: 100%;</p>
<p> height: 100%;</p>
<p> position: relative;</p>
<p> transform-style: preserve-3d;</p>
<p> transition: all 1s ease-in-out;</p>
<p>}</p>
<p>.card:hover {</p>
<p> transform: rotateY(180deg);</p>
<p>}</p>
<p>.card .back {</p>
<p> position: absolute;</p>
<p> width: 100%;</p>
<p> height: 100%;</p>
<p> backface-visibility: hidden;</p>
<p> transform: rotateY(180deg);</p>
<p> background-color: #d35400;</p>
<p> color: #fff;</p>
<p>}</p>
<p>.card .front {</p>
<p> position: absolute;</p>
<p> width: 100%;</p>
<p> height: 100%;</p>
<p> backface-visibility: hidden;</p>
<p> transform: rotateY(0);</p>
<p> background-color: #2980b9;</p>
<p> color: #fff;</p>
<p>}</p>
<p>.card .front h2,</p>
<p>.card .back h2 {</p>
<p> text-align: center;</p>
<p> padding: 10px;</p>
<p> margin: 0;</p>
<p>}</p>
<p>.card .front p,</p>
<p>.card .back p {</p>
<p> padding: 10px;</p>
<p> margin: 0;</p>
<p>}</p> <p>
</p> <p>
前面
<p> 这是前面的内容</p> <p>后面
<p> 这是后面的内容</p> <p></p> <p>效果展示说明：我们在一个容器元素（container）中创建了一个 div 元素（card），使用 perspective 属性设置了 3D 效果的视角，设置了容器和卡片的宽高以及 margin 值。在卡片元素中使用 transform-style: preserve-3d 属性将其转换为 3D 形式，使用 backface-visibility: hidden 属性来隐藏背面，使用 transition 属性来实现过渡动画效果。最后，在 hover 事件中使用 rotateY 属性实现卡片的 Y 轴旋转，即可实现 3D 环绕效果。</p>
4. 3D 图片翻转效果
基本原理
<p>这个特效同样是通过将一个 div 元素转换为 3D 形式，然后在不同状态下进行变换来实现。具体来说，我们需要使用 CSS 的 transform 属性来实现这个转换，使用 perspective 属性来设置 3D 效果的视角，使用 rotateY 属性来对元素进行旋转操作。</p>
效果展示
<p>以下是代码和样式预览：</p> <p>
</p>
<p>.container {</p>
<p> width: 300px;</p>
<p> height: 300px;</p>
<p> margin: 50px auto;</p>
<p> perspective: 1000px;</p>
<p>}</p>
<p>.item {</p>
<p> width: 100%;</p>
<p> height: 100%;</p>
<p> position: relative;</p>
<p> transform-style: preserve-3d;</p>
<p> transition: all 1s ease-in-out;</p>
<p>}</p>
<p>.item .front,</p>
<p>.item .back {</p>
<p> position: absolute;</p>
<p> width: 100%;</p>
<p> height: 100%;</p>
<p> backface-visibility: hidden;</p>
<p>}</p>
<p>.item .front {</p>
<p> background-image: url('https://source.unsplash.com/random/300x300');</p>
<p> background-size: cover;</p>
<p>}</p>
<p>.item .back {</p>
<p> transform: rotateY(180deg);</p>
<p> background-color: #d35400;</p>
<p> color: #fff;</p>
<p> text-align: center;</p>
<p>}</p>
<p>.item:hover {</p>
<p> transform: rotateY(180deg);</p>
<p>}</p> <p>
</p> <p>
后面
<p> 这是后面的内容</p> <p></p> <p>效果展示说明：我们同样使用了一个容器元素（container）和一个 div 元素（item）。为了实现图片效果，我们在 item 元素的 front 子元素中设置 background-image 属性，并将其铺满整个面板。我们还使用了 perspective 属性来设置 3D 效果的视角，使用 backface-visibility: hidden 属性来隐藏背面，使用 transition 属性来实现过渡动画效果。最后，在 hover 事件中使用 rotateY 属性实现元素的 Y 轴旋转，即可实现 3D 图片翻转效果。</p>
5. 3D 滚动条效果
基本原理
<p>这个特效通过将 body 元素转换为 3D 形式，然后对页面滚动条进行样式和位置的调整来实现。具体来说，我们需要使用 CSS 的 transform 属性来实现这个转换，使用 perspective 属性来设置 3D 效果的视角，使用 scrollbar-width 属性来影响滚动条的宽度，使用 scrollbar-color 属性来设置滚动条的颜色。</p>
效果展示
<p>以下是代码和样式预览：</p> <p>
</p>
<p>body {</p>
<p> position: relative;</p>
<p> height: 100vh;</p>
<p> width: 100%;</p>
<p> overflow-y: scroll;</p>
<p> perspective: 100px;</p>
<p>}</p>
<p>::-webkit-scrollbar {</p>
<p> position: fixed;</p>
<p> width: 20px;</p>
<p> height: 20px;</p>
<p>}</p>
<p>::-webkit-scrollbar-track-piece {</p>
<p> background: #e0e0e0;</p>
<p>}</p>
<p>::-webkit-scrollbar</p>