CSS3实现3D效果

最新推荐文章于 2025-10-30 09:01:25 发布

原创最新推荐文章于 2025-10-30 09:01:25 发布 · 2.9k 阅读

8 ·

CC 4.0 BY-SA版权

文章标签：

#css3 #动画 #三维 #3d #实例

涛痕世界同时被 2 个专栏收录

56 篇文章

订阅专栏

css

2 篇文章

订阅专栏

这篇博客详细介绍了如何使用CSS3实现3D效果，包括perspective、transform-style属性的使用，以及3D坐标和方位的讲解。通过翻转幻灯片、硬币旋转、动态字和三维画廊四个实例，深入浅出地展示了CSS3 3D效果的实现过程，适合前端开发者学习参考。

3D

1.属性

perspective ：透距离，单位像素（值越小，透视距离越近，效果越明显）：设置父元素上

perspective-origin: 设置透视点的位置

transform-style :指定某元素的子元素是位于三维空间内，取值：flat | preserve-3d

2.坐标

3.方位

这里写图片描述

4.实例

4.1翻转幻灯片

4.1.1效果

这里写图片描述

4.1.2思路

（1）给div设置4个img

<div id="box">
        <img src="images/banner1.jpg">
        <img src="images/banner2.jpg">
        <img src="images/banner3.jpg">
        <img src="images/banner4.jpg">
    </div>

（2）设置img为绝对布局

 #box img{
            position: absolute;
            top: 0;
            left: 0;
        }

（3）设置img的空间坐标，使其形成一个3D长方体

  img:nth-of-type(1) {
            transform: rotateX(0deg) translateZ(125px);

        }
        img:nth-of-type(2) {
            transform: rotateX(-90deg) translateZ(125px);

        }
        img:nth-of-type(3) {
            transform: rotateX(-180deg) translateZ(125px);

        }
        img:nth-of-type(4) {
            transform: rotateX(-270deg) translateZ(125px);

        }

（4）父元素给img提供三维空间

 transform-style: preserve-3d;

4.1.3源码

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>翻转滚动幻灯片</title>
    <style>
        #box{
            margin: 100px auto;
            width:600px;
            height: 250px;
            position: relative;
            transition: transform 2s;
            transform-style: preserve-3d;
        }
        #box img{
            position: absolute;
            top: 0;
            left: 0;
        }
        img:nth-of-type(1) {
            transform: rotateX(0deg) translateZ(125px);

        }
        img:nth-of-type(2) {
            transform: rotateX(-90deg) translateZ(125px);

        }
        img:nth-of-type(3) {
            transform: rotateX(-180deg) translateZ(125px);

        }
        img:nth-of-type(4) {
            transform: rotateX(-270deg) translateZ(125px);

        }
        div:hover{
            transform: rotateX(360deg);
        }
    </style>
</head>
<body>
    <div id="box">
        <img src="images/banner1.jpg">
        <img src="images/banner2.jpg">
        <img src="images/banner3.jpg">
        <img src="images/banner4.jpg">
    </div>
</body>
</html>

4.2硬币旋转

4.2.1效果

这里写图片描述

4.2.2思路

div中有两张图片，分别为硬币的正反面。将一张图片沿Y轴旋转180度。最后通过旋转div实现硬币旋转。

4.2.3源码

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>硬币反转</title>
    <style>
        #box{
            width: 290px;
            height:290px;
            margin: 100px auto;
            position: relative;
            transition: transform 2s;
            transform-style: preserve-3d;
        }
        img{
            position: absolute;
            top:0;
            left: 0;
        }
        img:nth-of-type(1){
            transform: rotateY(0deg);
        }
        img:nth-of-type(2){
            transform: rotateY(180deg);

        }
        #box:hover{
            transform: rotateY(180deg);
        }
    </style>
</head>
<body>
    <div id="box">
        <img src="images/coin1.png">
        <img src="images/coin2.png">
    </div>
</body>
</html>

4.3动态字

4.3.1效果

这里写图片描述

4.3.2思路

（1）有5个div，分别放5个字

<div id="box">
        <div class="word1">前</div>
        <div class="word2">端</div>
        <div class="word3">小</div>
        <div class="word4">学</div>
        <div class="word5">生</div>
    </div>

（2）设置伪元素before和after

  .word1:before,.word2:before,.word3:before,.word4:before,.word5:before{
            content:attr(data);
            position: absolute;
            color: #ffffff;
            top:0;
            left: 3px;
            transform-origin: left;
            transition: transform .5s;
        }

  .word1:after,.word2:after,.word3:after,.word4:after,.word5:after {
            position: absolute;
            color: #b3b3b3;
            top:3px;
            left: 10px;
            z-index: -1;
            transform-origin: left;
            transition: transform .5s;
        }

（3）为其设置动画

 .word1:hover:before,.word2:hover:before,.word3:hover:before,.word4:hover:before,.word5:hover:before{
            transform: rotateY(-40deg) skewY(10deg);
        }
        .word1:hover:after,.word2:hover:after,.word3:hover:after,.word4:hover:after,.word5:hover:after{
            transform: rotateY(40deg) skewY(10deg);
        }

4.3.3源码

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>动态字</title>
    <style>
        #box{
            margin: 100px auto;
            font-size: 80px;
            color:#005aa0;
            text-align: center;
        }
        .word1,.word2,.word3,.word4,.word5{
            display: inline-block;
            width: 90px;
            height: 100%;
            position: relative;
        }
        .word1:before,.word2:before,.word3:before,.word4:before,.word5:before{
            content:attr(data);
            position: absolute;
            color: #ffffff;
            top:0;
            left: 3px;
            transform-origin: left;
            transition: transform .5s;
        }
        .word1:before{
            content: "前";
        }
        .word2:before{
            content: "端";
        }
        .word3:before{
            content: "小";
        }
        .word4:before{
            content: "学";
        }
        .word5:before{
            content: "生";
        }
        .word1:after,.word2:after,.word3:after,.word4:after,.word5:after {
            position: absolute;
            color: #b3b3b3;
            top:3px;
            left: 10px;
            z-index: -1;
            transform-origin: left;
            transition: transform .5s;
        }
        .word1:after{
            content: "前";
        }
        .word2:after{
            content: "端";
        }
        .word3:after{
            content: "小";
        }
        .word4:after{
            content: "学";
        }
        .word5:after{
            content: "生";
        }
        .word1:hover:before,.word2:hover:before,.word3:hover:before,.word4:hover:before,.word5:hover:before{
            transform: rotateY(-40deg) skewY(10deg);
        }
        .word1:hover:after,.word2:hover:after,.word3:hover:after,.word4:hover:after,.word5:hover:after{
            transform: rotateY(40deg) skewY(10deg);
        }
    </style>
</head>
<body>
    <div id="box">
        <div class="word1">前</div>
        <div class="word2">端</div>
        <div class="word3">小</div>
        <div class="word4">学</div>
        <div class="word5">生</div>
    </div>
</body>
</html>

4.4三维画廊

4.4.1效果

这里写图片描述

4.4.2思路

将距离原轴一定距离的div沿着原轴旋转120度即可。

4.4.3源码

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>三维画廊</title>
    <style>
        body{
            background-color: #000000;
            perspective: 2000px;
        }
        #button{
            margin: 30px auto;
            text-align: center;
        }
        #box{
            margin: 100px auto;
            width: 400px;
            height: 400px;
            border-radius: 50px;
            position: relative;
            transition: transform 2s;
            transform-style: preserve-3d;

        }
        #box div{
            width: 400px;
            height: 400px;
            opacity: .5;
            position: absolute;
            top:0;
            left: 0;
            border-radius: 40px;

        }
        #box div:nth-of-type(1){
            background-color: #34fbff;
            transform: rotateY(0deg) translateZ(400px);

        }
        #box div:nth-of-type(2){
            background-color: #79ff28;
            transform: rotateY(120deg) translateZ(400px);
        }
        #box div:nth-of-type(3){
            background-color: #fff6f2;
            transform: rotateY(240deg) translateZ(400px);
        }
    </style>
    <script>
        window.onload = function () {
            var before = document.getElementById("before");
            var next = document.getElementById("next");
            var box = document.getElementById("box");
            var move = 0;
            before.onclick = function () {
                move = move+120;
                box.style.transform="rotateY("+move+"deg)";
            };
            next.onclick = function () {
                move = move-120;
                box.style.transform="rotateY("+move+"deg)";
            }
        }
    </script>
</head>
<body>
<div id="button">
    <button value="before" id="before">上一页</button>;
    <button value="next" id="next">下一页</button>;
</div>
<div id="box">
    <div></div>
    <div></div>
    <div></div>
</div>

</body>
</html>