美文网首页
css3实现3d旋转立方体

css3实现3d旋转立方体

作者: 南罔 | 来源:发表于2022-02-27 11:33 被阅读0次

具体实现效果如下:


3d旋转效果

话不多说,直接开干;介绍一下css3关键技术:

perspective:定义 3D 元素距视图的距离,以像素计。该属性允许您改变 3D 元素查看 3D 元素的视图。

transform:向元素应用 2D 或 3D 转换。该属性允许我们对元素进行旋转、缩放、移动或倾斜。

transform-style:属性规定如何在 3D 空间中呈现被嵌套的元素,这里使用其preserve-3d属性

transform-origin:允许改变被转换元素的位置。2D 转换元素能够改变元素 x 和 y 轴。3D 转换元素还能改变其 Z 轴。

html代码

<div class="content">
        <div class="wrapper" id="rotate">
            <div class="face"><img src="static/1.jpg" class="face-bg"></div>
            <div class="face"><img src="static/2.jpg" class="face-bg"></div>
            <div class="face"><img src="static/3.jpg" class="face-bg"></div>
            <div class="face"><img src="static/4.jpg" class="face-bg"></div>
            <div class="face"><img src="static/5.jpg" class="face-bg"></div>
            <div class="face"><img src="static/6.jpg" class="face-bg"></div>
        </div>
    </div>

css代码

*{
        margin: 0;
        padding: 0;
    }
    .content{
        width: 100%;
        height: 100vh;
        perspective:3000px;
        display: flex;
        animation: changeBg 20s linear infinite;
    }
    @keyframes changeBg {
        0%{
            background: url("static/1.jpg") no-repeat;
            background-size: cover;
        }
        20%{
            background: url("static/2.jpg") no-repeat;
            background-size: cover;
        }
        40%{
            background: url("static/3.jpg") no-repeat;
            background-size: cover;
        }
        60%{
            background: url("static/4.jpg") no-repeat;
            background-size: cover;
        }
        80%{
            background: url("static/5.jpg") no-repeat;
            background-size: cover;
        }
        100%{
            background: url("static/6.jpg") no-repeat;
            background-size: cover;
        }
    }
    .btn{
        width: 150px;
        height: 60px;
        right: 200px;
        top: 200px;
        font-size: 18px;
        font-weight: bold;
        background: rgba(255, 255, 255, .0);
        border: 4px solid #fff;
        cursor: pointer;
        color: #fff;
        position: absolute;
    }
    
    .btn:hover{
        background: rgba(255, 255, 255, .4);
    }
    
    .wrapper{
        width: 400px;
        height: 400px;
        margin: auto;
        transform-style: preserve-3d;
        position: relative;
        transform-origin: center;
        transform: rotateX(150deg) rotateY(50deg);
    }
    .face{
        width: 100%;
        height: 100%;
        position: absolute;
        left: 0;
        top: 0;
        opacity: .8;
        cursor: pointer;
    }
    .face:hover{
        opacity: 1;
        transform: scaleX(1.5);
    }
    .face .face-bg {
        width: 100%;
        height: 100%;
    }
    .face:nth-child(1) {
        transform: translateZ(200px);
    }
    .face:nth-child(2) {
        transform: translateZ(-200px);
    }
    .face:nth-child(3) {
        transform-origin: right;
        transform: translateZ(200px) rotateY(-90deg);
    }
    .face:nth-child(4) {
        transform-origin: left;
        transform: translateZ(200px) rotateY(90deg);
    }
    .face:nth-child(5) {
        transform-origin: top;
        transform: translateZ(200px) rotateX(-90deg);
    }
    .face:nth-child(6) {
        transform-origin: bottom;
        transform: translateZ(200px) rotateX(90deg);
    }

js代码

 const element = document.getElementById("rotate");
    window.onmousedown = down => {
        let [startX, startY] = [down.x, down.y];
        window.onmousemove = move => {
            const [endX, endY] = [move.x, move.y];
            const [stepX, stepY] = [endX-startX, endY-startY];  
            element.style.transform = `rotateX(${stepY * 2}deg) rotateY(${stepX * 2}deg)`
        }
        window.onmouseup = e3 => {
            window.onmousemove = null;
            window.onmouseup = null;
        }
    }

OK,具体实现完成,立方体有6个面,所以文中所用到六张图片,图片自己去整理了;如果有好的建议分享一下,哈哈哈~~~~~~~~

相关文章

  • 纯css3实现旋转3D立方体骰子

    纯css3实现旋转3D立方体骰子(自旋转型) 主要运用css3的transform,rotate,translat...

  • css3基础点(1)

    css3选择器 *css3新增的样式 3d作品展示 3d 立方体

  • 3D立方体

    CSS3确实很强大,很多高大上的动画都可以实现,这里来实现下3D立方体,效果图如下: html 其实,实现3D立方...

  • CSS3 3D盒子

    简单介绍一下CSS3的3D功能,实现一个立方体盒子。 主角 css3盒子的主角当然是transform相关的3d属...

  • Day05(demo 3d旋转 3d立方体 立体轮播)

    demo 3d旋转 demo 3d立方体 demo 立体轮播

  • css实现简单的3D效果

    css实现简单3D房间效果 纯3D效果实现上述效果,总体思路就是旋转容器,为容器贴纸。 这是一个简单的3D立方体空...

  • css3D旋转立方体

    3D旋转效果主要使用了CSS3 transform 属性 首先我们先完善布局 要想完成一个立方体,首先我们要有一个...

  • OpenGL ES / Core Animation分别实现旋转

    一 、使用OpenGL实现立方体旋转 二、 使用核心动画实现立方体旋转 使用 Core Animation 完成上...

  • OpenGL ES / Core Animation分别实现旋转

    一 、使用OpenGL实现立方体旋转 二、 使用核心动画实现立方体旋转 使用 Core Animation 完成上...

  • CSS3的 3D立方体旋转动画

    今次就来个大家用3D属性最爱炫技的场景,旋转的立方体,有人声称这种动画简直代表了CSS3的癫疯,不不,是巅峰。做完...

网友评论

      本文标题:css3实现3d旋转立方体

      本文链接:https://www.haomeiwen.com/subject/wrklrrtx.html