可控制的CSS3D盒子动画

今天来看一个CSS 3D盒子动画，利用jqueryUI和jquery实现盒子动画的控制。

简易效果在线把玩请戳这里，下载收藏请戳这里。

优化效果在线把玩戳这里，下载收藏请戳这里。

我们需要两个slider，一个input来控制盒子运动。

<div class="wrapper"><h4>Animate X axis</h4><div id="sliderX"></div><br><h4>Animate Y axis</h4><div id="sliderY"></div><br><input type="checkbox" /> Auto animate
</div>

接着我们来做盒子，我们需要两个面

<div id="viewport"><div id="cube"><div id="front"></div><div id="back"></div><div id="top"></div><div id="bottom"></div><div id="left"></div><div id="right"></div></div>
</div>

嗯，这样html文件就完成了，接下去是CSS（为了简化操作，我们还是用prefix free）。

.wrapper {width: 400px;
}
#viewport {perspective: 1000px;width: 200px;height: 200px;position: absolute;top: 50%;left: 50%;margin: -100px 0 0 -100px;
}
.animate {animation: myanim 5s infinite;
}
#cube {transform: rotateX(50deg) rotateY(50deg);transform-style: preserve-3D;transition: all 3s;width: 100%;height: 100%;
}
#cube div {width: 100%;height: 100%;position: absolute;color: #efefef;font-size: 140px;text-align: center;
}
#front {background: #556270;transform: translateZ(100px);
}
#back {background: #9C9F84;transform: translateZ(-100px) rotateY(180deg);
}
#top {background: #4ECDC4;transform: translateY(-100px) rotateX(90deg);
}
#bottom {background: #C7F464;transform: translateY(100px) rotateX(-90deg);
}
#left {background: #FF6B6B;transform: translateX(-100px) rotateY(-90deg);
}
#right {background: #C44D58;transform: translateX(100px) rotateY(90deg);
}
@keyframes myanim {0%  { transform: rotateX(0deg) rotateY(0deg); }50% { transform: rotateX(360deg) rotateY(360deg); }100% { transform: rotateX(0deg) rotateY(0deg); }
}

我们这里仅仅是为每个面添加了不同的颜色，当然大家可以为每个面增加背景图像等等。

然后我们需要用js来实现对动画的控制，我们用到了jquery和jqueryUI，所以实际上我们需要把这些库引进来，恰似下面代码（用的是codepen远端库）。

  <link rel='stylesheet' href='http://codepen.io/assets/libs/fullpage/jquery-ui.css'><script src='http://codepen.io/assets/libs/fullpage/jquery_and_jqueryui.js'></script>

然后我们可以使用jqueryUI了。

$(function () {$("#sliderX").slider({value: 50,min: 0,max: 360,animate: "fast",slide: function( event, ui ) {$("#cube").css("transform", "rotateX(" + ui.value + "deg)")}});$("#sliderY").slider({value: 50,min: 0,max: 360,animate: "fast",slide: function( event, ui ) {$("#cube").css("transform", "rotateY(" + ui.value + "deg)")}});$("input").on("click", function () {$("#cube").toggleClass("animate");});});

对于jQueryUI的使用，请大家参照官方网站。完工！

效果进行了优化，增加了键盘的上下左右键控制。

$(function () {var xAngle = 0,yAngle = 0;//x轴Slider$("#sliderX").slider({value: 0,min: 0,max: 360,animate: "fast",slide: function (event, ui) {$("#cube").css("transform", "rotateX(" + ui.value + "deg)");xAngle = ui.value;}});//y轴Slider$("#sliderY").slider({value: 0,min: 0,max: 360,animate: "fast",slide: function (event, ui) {$("#cube").css("transform", "rotateY(" + ui.value + "deg)");xAngle = ui.value;}});//自动播放,autoplay$("input").on("click", function () {$("#cube").toggleClass("animate");});//上下左右控制，left、right、up、down$('body').keydown(function (evt) {switch (evt.keyCode) {case 37:// leftyAngle -= 45;break;case 38:// upxAngle += 45;break;case 39:// rightyAngle += 45;break;case 40:// downxAngle -= 45;break;};$("#cube").css("transform", "rotateX(" + xAngle + "deg) rotateY(" + yAngle + "deg)");});
});

完工！敬请大家批评指正！
---------------------------------------------------------------

前端开发whqet，关注web前端开发技术，分享网页相关资源。
---------------------------------------------------------------

可控制的CSS3D盒子动画相关推荐

基于plc的隧道式，门框式全自动洗车机控制，组态王动画仿真
基于plc的隧道式,门框式全自动洗车机控制,组态王动画仿真,带PLC源代码,组态王源代码,图纸,IO地址分配id=639684592600&
用JS控制SVG的预设动画
目录 SVG基础 SVG预定义元素,不同的元素可拥有不同的属性可用于 `` 路径的命令,所有命令均允许小写,大写表示绝对定位,小写表示相对定位 stroke属性,可广泛应用于任何种类的线条.文字或元 ...
4、CSS立体盒子动画——复仇者联盟
1.效果展示 2.免费代码下载 CSS+立体盒子动画+复仇者联盟-Javascript文档类资源-CSDN下载 3.HTML代码结构 <body> <div class=" ...
基于S7-200 PLC和MCGS组态的水箱水位控制系统设计组态王动画仿真，带PLC源代码,plc程序每一条都带着解释
基于S7-200 PLC和MCGS组态的水箱水位控制系统设计组态王动画仿真,带PLC源代码,plc程序每一条都带着解释,组态王源代码,图纸,IO地址分配 ID:7269672992996086Hol ...
基于s7—1200的电梯控制，wincc hmi动画仿真，带PLC源代码
基于s7-1200的电梯控制,wincc hmi动画仿真,带PLC源代码,hmi源代码,图纸,IO地址分配id=639682504507&
Unity（三十七）：3D模型动画、脚本控制模型骨骼IK动画
效果(左侧模型动画,右侧模型IK控制) 模型动画下载及导入推荐模型动画下载链接地址 https://actorcore.reallusion.com/ Unity导入教程参见以下链接地址(需要科学上 ...
【Web】使用Three.js制作有数据源控制的3D模型动画
懒得写了,大概记录下步骤. 1. 使用开源软件Blender制作3D模型 1.1 Blender Blender类似于3DMax.Maya,是制作3D模型的工具软件,是开源软件,但较难使用,无法制作精 ...
基于vue渐变展开收起盒子动画（盒子高度不定）
基于vue展开收起盒子动画(盒子高度不定) 问题: transition动画只能对高度给定的盒子,在高度变化时实现展开收起动画.对于不定高度的盒子,transition无能为力解决方案: 小白入门, ...
【游戏开发实战】使用Unity制作像天天酷跑一样的跑酷游戏——第二篇：使用Animator控制跑酷角色的动画状态切换
文章目录一.前言二.制作一段跳.二段跳动画三.编辑动画控制器四.运行效果一.前言嗨,大家好,我是新发,今天是大年初二,大家牛年快乐,牛气冲天. 我打算写一篇使用Unity制作像天天酷跑一样 ...

可控制的CSS3D盒子动画

可控制的CSS3D盒子动画相关推荐

最新文章

热门文章