界面实例--旋转的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
界面实例--旋转的3d立方体的更多相关文章
- 纯CSS3实现一个旋转的3D立方体盒子
简单介绍 上网易前端微专业课程,里面有一个课外作业是实现一个3D旋转立方体.花了点时间做了下.还有点意思.写个简单教程.供大家学习. 先放上终于要实现的效果 注:代码在chrome 43.0.2357 ...
- CSS动画实例：3D立方体
CSS3支持3D转换,与3D转换有关的属性有: transform:向元素应用 2D或3D 转换. transform-origin:改变被转换元素的位置. transform-style:规定被嵌套 ...
- css3-实现3D立方体旋转
核心内容: 1.CSS3 中 animation.perspective 属性的熟练运用. 2.CSS3 中的变形属性 transform,在 3D 立体效果中的运用. 3.3D 立方体旋转实现原理. ...
- 基于css3新属性transform及原生js实现鼠标拖动3d立方体旋转
基于css3新属性transform,实现3d立方体的旋转 通过原生JS,点击事件,鼠标按下.鼠标抬起和鼠标移动事件,实现3d立方体的拖动旋转,并将旋转角度实时的反应至界面上显示 实现原理:通过获取鼠 ...
- 基于css3的3D立方体旋转特效
今天给大家分享一款基于css3的3D立方体旋转特效.这款特效适用浏览器:360.FireFox.Chrome.Safari.Opera.傲游.搜狗.世界之窗. 不支持IE8及以下浏览器.效果图如下 : ...
- js拖拽3D立方体旋转
这段时间有点闲,所以就自己找些小玩意来练习练习.今天做了一个可以拖拽页面内空白位置3D立方体就会跟着转动的小例子,布局方面用到css3 3D转换技术,通过transform控制旋转实现的. 上个图 代 ...
- Opengl ES 1.x NDK实例开发之七:旋转的纹理立方体
开发框架介绍请參见:Opengl ES NDK实例开发之中的一个:搭建开发框架 本章在第六章(Opengl ES 1.x NDK实例开发之六:纹理贴图)的基础上绘制一个旋转的纹理立方体,原理和纹理贴图 ...
- CSS3 3D立方体效果－transform也不过如此
CSS3系列已经学习了一段时间了,第一篇文章写了一些css3的奇技淫巧,原文戳这里,还获得了较多网友的支持,在此谢过各位,你们的支持是我写文章最大的动力^_^. 那么这一篇文章呢,主要是通过一个3D立 ...
- css3实践—创建3D立方体
css3实践-创建3D立方体 要想实现3D的效果,其实非常简单,只需指定一个元素为容器并设置transform-style:preserve-3d,那么它的后代元素便会有3D效果.不过有很多需要注意的 ...
随机推荐
- POJ1833 & POJ3187 & POJ3785 next_permutation应用
要是没有next_permutation这个函数,这些题认为还不算特别水,只是也不一定,那样可能就会有对应的模板了. 反正正是由于next_permutation这个函数.这些题包含之前的POJ122 ...
- cocos2dx 3.0 windows8下开发环境搭建搭建 不须要cygwin
已经接触cocos2dx有一段时间,但一直也仅仅是看看Demo,没有真正的去写代码.由于本人仅仅是java的coder.还是半路出家的coder,编程基础太浅. 对于c++.lua也不懂.近期coco ...
- 解决Struts中文乱码问题总结
在进行struts开发的过程中.总也是出现非常多的乱码问题.但归根究竟,也仅仅是下面三种情况: ㈠页面显示中文乱码 ㈡传递參数中文乱码 ㈢国际化资源文件乱码 以下就这三中情况介绍怎么在详细项目 ...
- ECharts简单入门
图1和图2是手机上显示的效果, 图3是电脑浏览器显示的效果. 如何使用ECharts? 1.下载echarts.js 2.引入echarts.js <script type="text ...
- 智课雅思词汇---七、cur是什么意思
智课雅思词汇---七.cur是什么意思 一.总结 一句话总结:词根:cur, curs ( cor, cour, cours, coars) = to run 1.cub是什么意思? 词根:cumb, ...
- POJ 3189 二分+Dinic
题意: 思路: 二分跨度 枚举最低座次 建图:源点向每头牛连边权为1的边 每头牛向当前枚举的B的区间这段连上边权为1的边 所有座次向汇点连边权为牛棚容量的边 判判流量是不是等于n 一开始写得是直接枚举 ...
- Linux常用系统管理软件
1.BleachBit是一款开源的系统清理工具,它可以释放磁盘空间,保护您的隐私,清除缓存,删除cookies.internet历史.临时文件.日志和丢弃的垃圾文件等,支持清除应用的残留数据,切碎文件 ...
- GPT模式下ghost系统 安装方法
GPT模式下ghost系统 安装方法 1.UEFI进入PE 2.使用diskgenius 软件 分区,选择GPT方式分区 3.使用CGI ghost 系统 文件到安装盘 4.UEFI修复:软件为 BC ...
- BZOJ1367: [Baltic2004]sequence(左偏树)
Description Input Output 一个整数R Sample Input 7 9 4 8 20 14 15 18 Sample Output 13 解题思路: 有趣的数学题. 首先确定序 ...
- 在AT151上面测试串口通讯
如下图所示,分别用putty打开两个窗口,一个是串口打开的,另外一个是网口连接的,分别是接收和发送,硬件上面RXD和TXD进行短接进行数据回流. 使用microcom工具,ctrl+x可以退出 参考文 ...