界面实例--旋转的3d立方体
Posted liwxmyself
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了界面实例--旋转的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>
.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; }
以上是关于界面实例--旋转的3d立方体的主要内容，如果未能解决你的问题，请参考以下文章