界面实例--旋转的3d立方体

好吧，这里直接编辑源码并不允许设置css和js……毕竟会有危险……那直接放代码吧

<!DOCTYPE html>
<html><head><meta charset="utf-8"><meta name="viewport" content="width=device-width,initial-scale=1.0"><title>vue-test</title><link rel="stylesheet" href="cube.css"><!--css--><script src="jquery-3.3.1.min.js"></script><!--引入jquery--><style>.contain{margin-top:100px;position:relative;width:800px;height:400px;background:black;padding:20px;text-align:center;}.row{position:relative;}.contain .button-container{}.contain .cube-container{width:300px;height:300px;margin:auto;}.content-container{color:white;border:1px solid white;width:300px;max-height:400px;overflow:auto;position:absolute;left:20px;top:20px;    display:none;}.contain .button-container .control-button{width:40px;height:40px;background:black;color:white;border-radius:20px;outline: none;     }.contain .button-container .control-button.choose{background:white;color:black;}</style></head><body><div class="contain"><div class="row"><div class="cube-container"><div class="cube animation-rotating"><div class="surface surface1">1</div><div class="surface surface2">2</div><div class="surface surface3">3</div><div class="surface surface4">4</div><div class="surface surface5">5</div><div class="surface surface6">6</div><!----></div>    </div><div class="content-container"><div class="content-title"></div><div class="content"></div></div></div><div class="button-container"><button class="control-button choose">0</button><button class="control-button">1</button><button class="control-button">2</button><button class="control-button">3</button><button class="control-button">4</button><button class="control-button">5</button><button class="control-button">6</button></div></div><script>var content=[{'title':'越人歌','content':'今夕何夕兮，搴舟中流。今日何日兮，得与王子同舟。蒙羞被好兮，不訾诟耻。心几烦而不绝兮，得知王子。山有木兮木有枝，心悦君兮君不知。'},{'title':'木兰花·拟古决绝词柬友','content':'人生若只如初见，何事秋风悲画扇。等闲变却故人心，却道故人心易变。骊山语罢清宵半，泪雨霖铃终不怨。何如薄幸锦衣郎，比翼连枝当日愿。'},{'title':'江城子·乙卯正月二十日夜记梦','content':'十年生死两茫茫，不思量，自难忘。千里孤坟，无处话凄凉。纵使相逢应不识，尘满面，鬓如霜。夜来幽梦忽还乡，小轩窗，正梳妆。相顾无言，惟有泪千行。料得年年肠断处，明月夜，短松冈'},{'title':'离思五首·其四','content':'曾经沧海难为水，除却巫山不是云。取次花丛懒回顾，半缘修道半缘君。'},{'title':'南歌子词二首 / 新添声杨柳枝词','content':'一尺深红胜曲尘，天生旧物不如新。合欢桃核终堪恨，里许元来别有人。井底点灯深烛伊，共郎长行莫围棋。玲珑骰子安红豆，入骨相思知不知。'},{'title':'卜算子·我住长江头','content':'我住长江头，君住长江尾。日日思君不见君，共饮长江水。 此水几时休，此恨何时已。只愿君心似我心，定不负相思意。'},];$(document).ready(function(){$('.cube .surface').hover(function(e){$(this).addClass('hover').siblings().removeClass('hover');index=$(this).index()+1;//被指向哪一面，数值1-6
                    $('.control-button').eq(index).addClass('choose').siblings().removeClass('choose');//那一面绑定的按钮处于选择状态
                    $(this).parent().attr('class','cube show'+index);//正方体停止旋转并转向该面    //显示内容
                    $('.content-container .content-title').html(content[index-1]['title']);$('.content-container .content').html(content[index-1]['content']);$('.content-container').css({'display':'block'});},function(e){$(this).removeClass('hover');$(this).parent().attr('class','cube animation-rotating');$('.control-button').eq(0).addClass('choose').siblings().removeClass('choose');$('.content-container').css({'display':'none'});});$('.control-button').on('click',function(){index = $(this).index();//按钮的顺序，0是返回原始状态，1-6分别对应6个面
                console.log(index);if(index==0){//返回原始状态
                    $('.control-button').eq(0).addClass('choose').siblings().removeClass('choose');$('.cube').attr('class','cube animation-rotating');//正方体重新运转
                    $('.hover').each(function(){//没有任何一面处于hover状态
                        $(this).removeClass('hover');});$('.content-container').css({'display':'none'});}else{//触发1-6面被hover的状态
                    $('.cube .surface').eq(index-1).trigger('mouseenter');}});});</script></body>
</html>

index.html

    .cube-container{perspective:1000px;-webkit-perspective:1000px;transform:scale(0.8);}.cube{height: 200px;width: 200px;position: relative;margin:auto;transform-style:preserve-3d;/*定义3d转换*/transition: all 1s;}.cube.show1{transform:rotateX(0deg) rotateY(0deg);}.cube.show2{transform:rotateX(0deg) rotateY(180deg);}.cube.show3{transform:rotateX(0deg) rotateY(90deg);}.cube.show4{transform:rotateX(0deg) rotateY(-90deg);}.cube.show5{transform:rotateX(-90deg) rotateY(0deg);}.cube.show6{transform:rotateX(90deg) rotateY(0deg);}.animation-rotating{animation:rotating 8s infinite;/*animation：动画名字 时长 无限循环 线性速度（匀速）*/    }/*动画效果，也可以以百分百的方式。默认逆时针的方向旋转。*/@keyframes rotating{from{transfrom:rotate3d(0.5,-0.5,0,0deg)}to{transform:rotate3d(0.5,-0.5,0,-360deg)}        }.cube .surface{height: 100%;width: 100%;opacity: 0.6;position: absolute;text-align: center;background: black;color:#fff;line-height: 200px;font-size: 30px;border:1px solid #fff;    transition: all 1s;        }.cube .surface1{transform:translateZ(100px);}.cube .surface2{    transform:rotateY(180deg) translateZ(100px);}.cube .surface3{transform:rotateY(-90deg) translateZ(100px);}.cube .surface4{transform:rotateY(90deg) translateZ(100px);}.cube .surface5{transform:rotateX(90deg) translateZ(100px);}.cube .surface6{transform:rotateX(-90deg) translateZ(100px);}.cube .surface1:hover, .cube .surface1.hover{transform:translateZ(200px);background:white;color:black;}.cube .surface2:hover, .cube .surface2.hover{transform:rotateY(180deg) translateZ(200px);background:white;color:black;}.cube .surface3:hover, .cube .surface3.hover{transform:rotateY(-90deg) translateZ(200px);background:white;color:black;}.cube .surface4:hover, .cube .surface4.hover{transform:rotateY(90deg) translateZ(200px);background:white;color:black;}.cube .surface5:hover, .cube .surface5.hover{transform:rotateX(90deg) translateZ(200px);background:white;color:black;}.cube .surface6:hover, .cube .surface6.hover{transform:rotateX(-90deg) translateZ(200px);background:white;color:black;}

cube.css

转载于:https://www.cnblogs.com/liwxmyself/p/10346106.html

界面实例--旋转的3d立方体相关推荐

java3D实现空间立方体,纯CSS3实现一个旋转的3D立方体盒子
简单介绍上网易前端微专业课程,里面有一个课外作业是实现一个3D旋转立方体.花了点时间做了下.还有点意思.写个简单教程.供大家学习. 先放上终于要实现的效果注:代码在chrome 43.0.2357 ...
html鼠标互动旋转立方体,css3 transform及原生js实现鼠标拖动3D立方体旋转的示例介绍...
本文通过原生JS,点击事件,鼠标按下.鼠标抬起和鼠标移动事件,实现3D立方体的拖动旋转,并将旋转角度实时的反应至界面上显示. 实现原理:通过获取鼠标点击屏幕时的坐标和鼠标移动时的坐标,来获得鼠标在X轴 ...
3d旋转相册代码源码_原生 JS 实现 3D 立方体
访问该URL可查看效果:http://is666a.gitee.io/javascript3d_cube/ 项目源码已上传码云:小朋友/JavaScript 3D立方体原生 JS 实现 3D 立方体 ...
立方体在三维坐标中的旋转（3D,Spining）
立方体在三维坐标中的旋转(3D,Spining) 示例 HTML CSS 更多有趣示例尽在知屋安砖社区示例 HTML <div id="ThreeJS" style=& ...
html5把六张图片做成立方体,html5 3D旋转的图片立方体代码
特效描述:html53D 旋转的图片立方体.html5 css3转换属性创建3D旋转立方体多维数据图片库代码. 代码结构 1. HTML代码单击下面的图片来旋转立方体. //DOM load eve ...
图片3d立方体旋转html代码,超酷3D立方体空间旋转图片画廊特效
这是一款效果非常炫酷的CSS3 3D立方体空间旋转图片画廊特效.该特效实际是一个3D立方体,在其内部显示图片.在点击立方体每一面的图片时,这张图片就会放大到屏幕的中间,效果非常的酷. 因为IE浏览器不 ...
HTML5七夕情人节表白网页(抖音3D立方体图像库) HTML+CSS+JavaScript 求婚示爱代码 520情人节告白代码程序员表白源码 3D旋转相册 js烟花代码 css爱心表白
HTML5七夕情人节表白网页❤抖音❤3D立方体图像库❤ HTML+CSS+JavaScript 求婚示爱代码 520情人节告白代码程序员表白源码 3D旋转相册 js烟花代码 css爱心表白这是程序 ...
3d立方体旋转相册（转载）
抖音上要到的效果第一步:新建txt文件第二步:把以下代码复制到txt文件中,并保存 <!DOCTYPE html> <html><head><meta c ...
HTML5——3D立方体旋转动画
效果图: 代码如下: <!DOCTYPE html> <html> <head><meta charset="UTF-8">< ...

界面实例--旋转的3d立方体

界面实例--旋转的3d立方体相关推荐

最新文章

热门文章