js魔术方法,魔方框架怎么用
本文操作环境：windows7系统、javascript1.8.5版、戴尔自交第三代电脑。
javascript怎么实现魔方效果？
实现效果：
魔方动态转换，同时每个面里的每个块都能进行动态变换。
实现代码：
！声明文档类型
超文本标记语言
头
meta charset=UTF-8
标题魔方/标题
style type=text/css
*{
边距：0;
填充：0;
}
正文{
宽度：100%;
身高：100%;
背景：径向渐变(#fff，粉色);
}。容器{
宽度：300像素
高度：300像素
/*边框：1px纯色# 000;*/
边距：150像素自动；
视角：20000像素
}。方框{
宽度：300像素
高度：300像素
边框：1px纯色透明；
框大小：边框-框；
位置：相对；
变换样式：保留-3d；
/*转换：rotateX(45度)罗泰(45度);*/
动画：旋转10s线性无限；
}
/* @关键帧ro{
0%{
transform:rotateX(0度)rotateY(0度)；
}
100%{
变换：rotateX(360度)rotateY(360度);
}
}*/
@关键帧旋转{
100%{
变换：旋转器(360度)rotatey(360度)rotatez(360度);
}
}。方框-页面{
宽度：300像素
高度：300像素
位置：绝对；
框大小：边框-框；
变换样式：保留-3d；
}。顶部{
/*背景色：红色；*/
transform:平移z(150 px)；
}。底部{
/*背景色：粉色；*/
transform:平移z(-150 px)rotateX(180度)；
}。左侧{
/*背景色：橙色；*/
transform:translate x(-150 px)rotateY(-90度)；
}。右{
/*背景色：绿色；*/
transform:translate x(150 px)rotateY(90 deg)；
}。之前{
/*背景色：紫色；*/
transform:translate y(150 px)rotateX(-90度)；
}。在{
/*背景色：蓝色；*/
transform:平移y(-150 px)rotateX(90度)；
}
/* .box-page div:n-child(1){
动画：a1 4.5s秒淡入0.5s
}。box-page div:n-child(2){
动画：a1 4.5s秒淡入1s；
}。box-page div:n-child(3){
动画：a1 4.5s秒淡入1.5秒
}。box-page div:n-child(4){
动画：a1 4.5s秒淡入2s；
}。box-page div:n-child(5){
动画：a1 4.5s秒淡入2.5秒
}。box-page div:n-child(6){
动画：a1 4.5s秒淡入3s；
}。box-page div:n-child(7){
动画：a1 4.5s秒淡入3.5秒
}。box-page div:n-child(8){
动画：a1 4.5s秒淡入4s；
}。box-page div:n-child(9){
动画：a1 4.5s秒淡入4.5s
}
@关键帧a1{
0%{
transform:平移z(0px)scale(0)rotateZ(0 deg)；
}
20%{
transform:平移z(300像素)scale(0)rotateZ(720度)；
}
90%{
transform:平移z(300像素)scale(0)rotateZ(720度)；
}
100%{
transform:平移z(0px)scale(0)rotateZ(0 deg)；
}
}*/。第一个孩子box-page div:n-child(3)，box-page div:n-child(5)，盒子-页面div:n-child(7)，200 .box-page div:n-child(9){
变换：旋转(0度)；
动画：旋转6s线性无限；
}
@关键帧旋转{
20%{
变换：旋转(0度)；
背景-尺寸：300像素300像素
}
40%{
变换：旋转(540度);
背景-尺寸：100像素100像素
}
60%{
变换：旋转(540度);
背景-尺寸：100像素100像素
}
80%{
变换：旋转(0度)；
背景-尺寸：300像素300像素
}
}。box-page div:n-child(2)，box-page div:n-child(4)，box-page div:n-child(6).框-页分区：第n个子级(8)
{
变换：rotateX(0度);
动画：rotatex 6s线性无限；
}
@关键帧rotatex{
20%{
变换：rotateX(0度);
背景-尺寸：300像素300像素
}
40%{
变换：rotateX(540度)；
背景-尺寸：100像素100像素
}
60%{
变换：rotateX(540度)；
背景-尺寸：100像素100像素
}
80%{
变换：rotateX(0度);
背景-尺寸：300像素300像素
}
}
/风格
/头
身体
div class=容器
div class=box
div class=top box-page/div
div class=底部框-页面/div
div class=left box-page/div
div class=右框-页面/div
div class=before box-page/div
div class=after box-page/div
/div
/div
脚本类型=文本/javascript
var arr=文档。查询selectorall(.boxdiv’)；
for(var n=0；数组长度；n ){
//行遍历
for(var I=0；i3；i ){
//列遍历
for(var j=0；JBOY3乐队；j ){
var divs=文档。createelement( div )；
迪维丝。风格。CSS text= width:100px；高度：100像素边框：2px固体# fff框大小：边框-框；位置：绝对；背景图像：url(imgs/a n .jpg)；背景尺寸：300像素x 300像素；
安排，安排appendChild(divs)；
迪维丝。风格。left=j * 100 px
迪维丝。风格。top=I * 100 px
迪维丝。风格。backgroundpositionx=-j * 100 px ；
迪维丝。风格。背景位置y=-I * 100 px ；
}
}
}
/脚本
/body
/html推荐学习： 《javascript基础教程》 以上就是爪哇岛描述语言怎么实现魔方效果的详细内容，更多请关注我们其它相关文章！
郑重声明：本文由网友发布，不代表盛行IT的观点，版权归原作者所有，仅为传播更多信息之目的，如有侵权请联系，我们将第一时间修改或删除，多谢。