CSS3怎样做能点击的魔方3d效果，用到哪些知识点

发布时间：2023-10-20 15:35:43 所属栏目：语言来源：

导读：主要用到知识点：

•css3 3d转换 •原生js鼠标拖动事件

•display:grid 布局

实现的功能

•3d魔方可点击，可拖动

html：

<div class="container">

<div cla

主要用到知识点：

•css3 3d转换 •原生js鼠标拖动事件

•display:grid 布局

实现的功能

•3d魔方可点击，可拖动

html：

<div class="container">

        <div class="box defaul">

            <div class="pic"><img src="./img/cat.jpg" alt=""></div>

            <div class="pic"><img src="./img/dog.jpg" alt=""></div>

            <div class="pic"><img src="./img/elephant.jpg" alt=""></div>

            <div class="pic"><img src="./img/lion.jpg" alt=""></div>

            <div class="pic"><img src="./img/rabbit.jpg" alt=""></div>

            <div class="pic"><img src="./img/monkey.jpg" alt=""></div>

        </div>

    </div>

    <h1>点击下面的图片按钮切换</h1>

    <div class="btn">

        <input type="image" class="1" src="./img/cat.jpg">

        <input type="image" class="2" src="./img/dog.jpg">

        <input type="image" class="3" src="./img/elephant.jpg">

        <input type="image" class="4" src="./img/lion.jpg">

        <input type="image" class="5" src="./img/rabbit.jpg">

        <input type="image" class="6" src="./img/monkey.jpg">

    </div>

css：

   * {

        margin: 0;

        padding: 0;

    }

    html,

    body {

        width: 100%;

        height: 100%;

        background: #66677c;

        text-align: center;

    }

    .container {

        width: 300px;

        height: 300px;

        margin: 50px auto 150px;

        perspective: 1200px;

    }

    .container .box {

        width: 300px;

        height: 300px;

        position: relative;

        transform-style: preserve-3d;

        transition: transform 0.5s;

    }

    .container .box .pic {

        position: absolute;

        left: 0;

        top: 0;

        width: 300px;

        height: 300px;

        box-shadow: 0px 0px 5px #fff;

    }

    .container .box .pic img {

        width: 100%;

        height: 100%;

        cursor: pointer;

    }

    .container .box .pic:nth-child(1) {

        transform: translateZ(150px);

    }

    .container .box .pic:nth-child(2) {

        transform: rotateY(-180deg) translateZ(150px);

    }

    .container .box .pic:nth-child(3) {

        transform: rotateY(90deg) translateZ(150px);

    }

    .container .box .pic:nth-child(4) {

        transform: rotateY(-90deg) translateZ(150px);

    }

    .container .box .pic:nth-child(5) {

        transform: rotateX(90deg) translateZ(150px);

    }

    .container .box .pic:nth-child(6) {

        transform: rotateX(-90deg) translateZ(150px);

    }

    h1 {

        color: #fff;

        font-size: 30px;

        margin-bottom: 30px;

    }

    .btn {

        display: grid;

        justify-content: center;

        grid-template-columns: 100px 100px 100px;

        grid-template-rows: 100px 100px;

        grid-gap: 15px;

    }

    .btn input {

        width: 100px;

        height: 100px;

        outline: none;

        border: 2px solid #fff;

    }

    .btn input:focus {

        border: 2px solid #e70;

    }

    .defaul {

        transform: translateZ(-150px) rotateX(-10deg) rotateY(15deg);

    }

    .image1 {

        transform: translateZ(-150px) rotateX(0deg) rotateY(0deg);

    }

    .image2 {

        transform: translateZ(-150px) rotateY(-180deg);

    }

    .image3 {

        transform: translateZ(-150px) rotateY(-90deg);

    }

    .image4 {

        transform: translateZ(-150px) rotateY(90deg);

    }

    .image5 {

        transform: translateZ(-150px) rotateX(-90deg);

    }

    .image6 {

        transform: translateZ(-150px) rotateX(90deg);

    }

js：

(function(){

        var btn = document.getElementsByClassName('btn')[0];

        var box = document.getElementsByClassName('box')[0];

        btn.addEventListener('click',function(e){

            var className = e.target.className;

            if(className !== 'btn'){

                box.style = '';

                box.classList.replace(box.classList[1],'image'+className);

            }

        })

        //鼠标拖动效果

        var xN = 10, yN = 15;

        document.addEventListener('mousedown',function(e){

            e.preventDefault();

            e.stopPropagation();

            var x = e.clientX;

            var y = e.clientY;

            document.addEventListener('mousemove',move);

            document.addEventListener('mouseup', up);

            function move(e){

                e.preventDefault();

                e.stopPropagation();

                var x1 = e.clientX;

                var y1 = e.clientY;

                xN += (x1 - x)*0.04;

                yN += (y1 - y)*0.04;

                box.style.transform = 'translateZ(-150px) rotateY(' + xN + 'deg) rotateX(' + -yN + 'deg)';

            }

            function up(){

                document.removeEventListener('mousemove', move);

            }

        })

    })()

（编辑：聊城站长网）

【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!