利用css3实现3d立体特效--正方体

最新推荐文章于 2023-03-01 19:26:13 发布

置顶 Eden-one

最新推荐文章于 2023-03-01 19:26:13 发布

阅读量5.8k

点赞数 4

分类专栏： web网页设计基础

本文链接：https://blog.csdn.net/SHINE_SUNNY1/article/details/75203944

版权

web网页设计基础专栏收录该内容

6 篇文章 0 订阅

订阅专栏

其实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 div{
        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 div:nth-child(1){
        background-image: url(img/psbe5ZDRJYLJ.jpg);/*照片可以另行添加，也可以换成背景色*/
        background-size: 300px 300px;
        transform-origin: top;
        transform: rotateX(90deg);
    }
    .box div:nth-child(2){
        background-image: url(img/psbe7VL5XVBF.jpg);
        background-size: 300px 300px;
        transform-origin:left;
        transform: rotateY(-90deg);
    }
    .box div:nth-child(3){
    background-image: url(img/psbeL8Q5LRIN.jpg);
    background-size: 300px 300px;
    }
    .box div:nth-child(4){
        background-image: url(img/psbeNEXVJIFI.jpg);
        background-size: 300px 300px;
        transform-origin:right;
        transform: rotateY(90deg);
    }
    .box div:nth-child(5){
        background-image: url(img/psbeUIJ7FZJ6.jpg);
        background-size: 300px 300px;
        transform-origin: bottom;
        transform: rotateX(-90deg);
    }
    .box div:nth-child(6){
        background-image: url(img/psbR3FYMIPK.jpg);
        background-size: 300px 300px;
        transform: translateZ(300px);
    }
</style>
<body>
<div class="sence">
    <div class="box">
        <div>
        </div>
        <div>

        </div>
        <div>

        </div>
        <div>

        </div>
        <div>
        </div>
        <div>

        </div>
    </div>
</div>
</body>
</html>

Eden-one

关注

4
点赞
踩
13

收藏

觉得还不错? 一键收藏
0
评论
利用css3实现3d立体特效--正方体

其实css3中提供了很多让我们实现非常炫酷的工具，好多特效不需要通过复杂的js代码来实现，而可以通过简单的css3代码来实现，这一次我就给大家介绍一下3d立体盒子的实现以及动画的实现。要实现这个正当体盒子你要对css3的内容有基本的了解而且要具备css中基本的语法，css3中主要掌握的内容如下：了解css3中的transform中的scale(伸缩),旋转rotate，以及平
复制链接

扫一扫

专栏目录