如何使用css3实现3d立体特效-js教程-PHP中文网

首页

web前端

js教程

如何使用css3实现3d立体特效

php中世界最好的语言

Mar 14, 2018 pm 02:56 PM

css css3

这次给大家带来如何使用css3实现3d立体特效，使用css3实现3d立体特效的注意事项有哪些，下面就是实战案例，一起来看一下。

其实css3中提供了很多让我们实现非常炫酷的工具，好多特效不需要通过复杂的js代码来实现，而可以通过简单的css3代码来实现，这一次我就给大家介绍一下3d立体盒子的实现以及动画的实现。

要实现这个正当体盒子你要对css3的内容有基本的了解而且要具备css中基本的语法，css3中主要掌握的内容如下：

了解css3中的transform中的scale(伸缩),旋转rotate，以及平移translate等属性。
了解css3中动画的实现。
了解css3中过度的特效。

html中的代码特别简单，你只需要设置六个块元素，最重要的部分也是最核心的部分就是css3中的代码了，我将代码实现如下，具体实现的情况，我会在代码中添加注释。

<!DOCTYPE html><html lang="en"><head>    <meta charset="UTF-8">    <title>Title</title></head><style>    html{        background: radial-gradient(ellipse at center, #2A2A2A 0%, #000000 100%);        width: 100%;        height:100%;    }    .sence{        width: 600px;        height:600px;        position: fixed;        top: 0;        left:0;        right:0;        bottom:0;        margin: auto;    }    .box{        width: 300px;        height:300px;        position: relative;        transform-style: preserve-3d;        transform-origin: center center 75px;        /*允许改变转换元素的位置*/        animation:  myfirst 3s linear infinite ;        /*指的是匀速变化   并且原路返回*/alternate    }
    .box p{        width: 100%;        height:100%;        position: absolute;        top:0;        left:0;        border-radius: 5px;        transform-style: preserve-3d;        box-shadow: 0 0 30px 5px #fff;        opacity: 0.8;    }    @keyframes myfirst {        from {            transform:  skew(0) translate3d(0,0,0) rotateX(0deg) rotateY(0deg) rotateZ(0deg);        }        to {            transform: skew(0deg) translate3d(10px,20px,30px) rotateX(360deg) rotateY(360deg) rotateZ(90deg);        }    }    .box p:nth-child(1){        background-image: url(img/psbe5ZDRJYLJ.jpg);/*照片可以另行添加，也可以换成背景色*/        background-size: 300px 300px;        transform-origin: top;        transform: rotateX(90deg);    }    .box p:nth-child(2){        background-image: url(img/psbe7VL5XVBF.jpg);        background-size: 300px 300px;        transform-origin:left;        transform: rotateY(-90deg);    }    .box p:nth-child(3){     background-image: url(img/psbeL8Q5LRIN.jpg);     background-size: 300px 300px;    }    .box p:nth-child(4){        background-image: url(img/psbeNEXVJIFI.jpg);        background-size: 300px 300px;        transform-origin:right;        transform: rotateY(90deg);    }    .box p:nth-child(5){        background-image: url(img/psbeUIJ7FZJ6.jpg);        background-size: 300px 300px;        transform-origin: bottom;        transform: rotateX(-90deg);    }    .box p:nth-child(6){        background-image: url(img/psbR3FYMIPK.jpg);        background-size: 300px 300px;        transform: translateZ(300px);    }</style><body><p class="sence">    <p class="box">        <p>        </p>        <p>                 </p>        <p>                    </p>        <p>                   </p>        <p>        </p>        <p>                 </p>    </p></p></body></html>

登录后复制

相信看了本文案例你已经掌握了方法，更多精彩请关注php中文网其它相关文章！

热AI工具

热工具

热门话题

gmail邮箱登陆入口在哪里

7526

CakePHP 教程

1378

steam的账户名称是什么格式

win11激活密钥永久

NYT连接提示和答案

显示更多

Related knowledge

bootstrap怎么写分割线 Apr 07, 2025 pm 03:12 PM

创建 Bootstrap 分割线有两种方法：使用标签，可创建水平分割线。使用 CSS border 属性，可创建自定义样式的分割线。

HTML，CSS和JavaScript的角色：核心职责 Apr 08, 2025 pm 07:05 PM

HTML定义网页结构，CSS负责样式和布局，JavaScript赋予动态交互。三者在网页开发中各司其职，共同构建丰富多彩的网站。

bootstrap怎么插入图片 Apr 07, 2025 pm 03:30 PM

在 Bootstrap 中插入图片有以下几种方法：直接插入图片，使用 HTML 的 img 标签。使用 Bootstrap 图像组件，可以提供响应式图片和更多样式。设置图片大小，使用 img-fluid 类可以使图片自适应。设置边框，使用 img-bordered 类。设置圆角，使用 img-rounded 类。设置阴影，使用 shadow 类。调整图片大小和位置，使用 CSS 样式。使用背景图片，使用 background-image CSS 属性。

vue中怎么用bootstrap Apr 07, 2025 pm 11:33 PM

在 Vue.js 中使用 Bootstrap 分为五个步骤：安装 Bootstrap。在 main.js 中导入 Bootstrap。直接在模板中使用 Bootstrap 组件。可选：自定义样式。可选：使用插件。

bootstrap怎么调整大小 Apr 07, 2025 pm 03:18 PM

要调整 Bootstrap 中元素大小，可以使用尺寸类，具体包括：调整宽度：.col-、.w-、.mw-调整高度：.h-、.min-h-、.max-h-

bootstrap怎么设置框架 Apr 07, 2025 pm 03:27 PM

要设置 Bootstrap 框架，需要按照以下步骤：1. 通过 CDN 引用 Bootstrap 文件；2. 下载文件并将其托管在自己的服务器上；3. 在 HTML 中包含 Bootstrap 文件；4. 根据需要编译 Sass/Less；5. 导入定制文件（可选）。设置完成后，即可使用 Bootstrap 的网格系统、组件和样式创建响应式网站和应用程序。