css3实现可拖动的魔方3d效果


Posted in HTML / CSS onMay 07, 2019

主要用到知识点:

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

•display:grid 布局

实现的功能

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

•直接看效果

css3实现可拖动的魔方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);
            }
        })
    })()

总结

以上所述是小编给大家介绍的基于css3实现可拖动的魔方3d效果 ,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对三水点靠木网站的支持!如果你觉得本文对你有帮助,欢迎转载,烦请注明出处,谢谢!

HTML / CSS 相关文章推荐
CSS3中的元素过渡属性transition示例详解
Nov 30 HTML / CSS
使用 CSS3 中@media 实现网页自适应的示例代码
Mar 24 HTML / CSS
css3中flex布局宽度不生效的解决
Dec 09 HTML / CSS
HTML5视频支持检测(检查浏览器是否支持视频播放)
Jun 08 HTML / CSS
html5拍照功能实现代码(htm5上传文件)
Dec 11 HTML / CSS
如何利用input事件来监听移动端的输入
Apr 15 HTML / CSS
canvas中普通动效与粒子动效的实现代码示例
Jan 03 HTML / CSS
html5录音功能实战示例
Mar 25 HTML / CSS
html2canvas生成清晰的图片实现打印的示例代码
Sep 30 HTML / CSS
Html5获取高德地图定位天气的方法
Dec 26 HTML / CSS
奇妙的 CSS shapes(CSS图形)
Apr 05 HTML / CSS
深入理解margin塌陷和margin合并的解决方案
Jun 26 HTML / CSS
CSS3 实现童年的纸飞机
May 05 #HTML / CSS
使用CSS变量实现炫酷惊人的悬浮效果
Apr 26 #HTML / CSS
详解CSS3中的box-sizing(content-box与border-box)
Apr 19 #HTML / CSS
CSS3 transforms应用于背景图像的解决方法
Apr 16 #HTML / CSS
CSS3实现王者荣耀匹配人员加载页面的方法
Apr 16 #HTML / CSS
CSS3实现王者匹配时的粒子动画效果
Apr 12 #HTML / CSS
CSS3解析抖音LOGO制作的方法步骤
Apr 11 #HTML / CSS
You might like
在“咖啡之国”感受咖啡文化
2021/03/03 咖啡文化
php 删除一个数组中的某个值.兼容多维数组!
2012/02/18 PHP
curl和libcurl的区别简介
2015/07/01 PHP
使用Huagepage和PGO来提升PHP7的执行性能
2015/11/30 PHP
php parse_str() 函数的定义和用法
2016/05/23 PHP
Laravel Intervention/image图片处理扩展包的安装、使用与可能遇到的坑详解
2017/11/14 PHP
用javascript实现分割提取页面所需内容
2007/05/09 Javascript
理解Javascript_08_函数对象
2010/10/15 Javascript
jQuery中DOM操作实例分析
2015/01/23 Javascript
JavaScript显示表单内元素数量的方法
2015/04/02 Javascript
javascript中indexOf技术详解
2015/05/07 Javascript
javascript排序函数实现数字排序
2015/06/26 Javascript
javascript实现状态栏文字首尾相接循环滚动的方法
2015/07/22 Javascript
jquery实现可自动判断位置的弹出层效果代码
2015/10/12 Javascript
不用一句js代码初始化组件
2016/01/27 Javascript
JS实现的验证身份证及获取地区功能示例
2017/01/16 Javascript
nuxt.js中间件实现拦截权限判断的方法
2018/11/21 Javascript
使用pm2部署node生产环境的方法步骤
2019/03/09 Javascript
vue开发移动端底部导航条功能
2020/04/08 Javascript
Python中elasticsearch插入和更新数据的实现方法
2018/04/01 Python
python 借助numpy保存数据为csv格式的实现方法
2018/07/04 Python
Python使用googletrans报错的解决方法
2018/09/25 Python
解决python中 f.write写入中文出错的问题
2018/10/31 Python
django云端留言板实例详解
2019/07/22 Python
python使用配置文件过程详解
2019/12/28 Python
python多线程semaphore实现线程数控制的示例
2020/08/10 Python
python 实现弹球游戏的示例代码
2020/11/17 Python
python+opencv3.4.0 实现HOG+SVM行人检测的示例代码
2021/01/28 Python
阿里健康大药房:阿里自营网上药店
2017/08/01 全球购物
三星加拿大官方网上商店:Samsung CA
2020/12/18 全球购物
物流管理专业大学生自荐信
2013/10/04 职场文书
探矿工程师自荐信
2014/01/24 职场文书
内蒙古鄂尔多斯市市长寄语
2014/04/10 职场文书
商场租赁意向书
2014/07/30 职场文书
2014企业年终工作总结
2014/12/23 职场文书
Python获取字典中某个key的value
2022/04/13 Python