js实现正方体旋转动画

效果：

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>正方体旋转动画</title><style>
*{margin:0 auto;padding:0;}html{background:#222;}div.wrap{width:200px;perspective:1000px;/*景深*/position:absolute;left:50%;top:50%;transform: translateX(-50%) translateY(-50%);/*利用位移来处理垂直水平居中*/}.wrap>div.cube{margin: 0 auto;width:200px;height:200px;position:relative;transform-style: preserve-3d;transform:rotateX(-50deg) rotateY(-50deg) rotateZ(0deg);/*旋转*/animation:move 8s infinite linear;/*动画*/}/*关键帧*/@keyframes move{0% {transform: rotateX(0deg) rotateY(0deg);}100% {transform: rotateX(360deg) rotateY(360deg);}}.cube>div{width:100%;height:100%;border-radius:20px;position:absolute;box-shadow:0 0 10px currentColor;/*currentColor关键字的使用值是 color 属性值的计算值*/transition: background 0.4s ease-in-out, box-shadow 0.4s ease-in-out;/*过渡 属性 时间 过渡曲线*/}.cube:hover>div{background:currentColor;box-shadow:0 0 20px currentColor;}.cube div.out-front{color: deeppink;transform:translateZ(100px);/*转换  位移*/}.cube div.out-back{color: seagreen;transform:translateZ(-100px) rotateY(180deg);/*转换 位移 旋转*/}.cube div.out-left{color: skyblue;transform:translateX(-100px) rotateY(-90deg);}.cube div.out-right{color: lightcoral;transform:translateX(100px) rotateY(90deg);}.cube div.out-top{color: mediumseagreen;transform:translateY(-100px) rotateX(90deg);}.cube div.out-bottom{color: dodgerblue;transform:translateY(100px) rotateX(-90deg);}.cube img.pic{width:200px;height:200px;}
</style>
</head>
<body>
</div><div class="wrap"><div class="cube"><div class="out-front"><img src="https://files-cdn.cnblogs.com/files/cjsblog/cube01.bmp" class="pic"></div><div class="out-back"><img src="https://files-cdn.cnblogs.com/files/cjsblog/cube02.bmp" class="pic"></div><div class="out-left"><img src="https://files-cdn.cnblogs.com/files/cjsblog/cube03.bmp" class="pic"></div><div class="out-right"><img src="https://files-cdn.cnblogs.com/files/cjsblog/cube04.bmp" class="pic"></div><div class="out-top"><img src="https://files-cdn.cnblogs.com/files/cjsblog/cube05.bmp" class="pic"></div><div class="out-bottom"><img src="https://files-cdn.cnblogs.com/files/cjsblog/cube06.bmp" class="pic"></div></div></div></body>
</html>

js实现正方体旋转动画相关推荐

css动画效果制作正方体旋转相册
以下代码利用css动画效果制作了一个旋转的正方体,给正方体六个面放置好图片就可以当一个炫酷有趣的正方体旋转相框啦!可以将女朋友的照片放进去哦,赶快去试试,给女朋友一个惊喜吧! 下面没有放入背景建议大家 ...
短视频带货系统，HTML+CSS+JS实现宇宙星球旋转动画特效
短视频带货系统,HTML+CSS+JS实现宇宙星球旋转动画特效主要代码实现: css样式: /*** @date 2021/1/20 16:10*//* 取消默认间距 */* {margin: 0; ...
不炫技，SVG+CSS3 旋转动画属性就能实现的梦幻效果
CSS3的动画相关的基础的属性基本都涉猎过了,个人认为,其中最复杂的是d:path()路径变形动画,超过3D,而位移.轨迹.旋转.缩放.斜切什么的,相对简单一些,但作为非动画设计师而言,灵活的掌握这些 ...
jquery工具箱旋转动画效果
jquery工具箱旋转动画效果今天给大家分享一个工具箱的旋转动画效果,因为做GIS项目的时候所需要到,这是我在懒人之家看到的一个jquery鼠标点击按钮图标旋转弹出图标菜单旋转动画. 首先,可以引用 ...
微信小程序旋转动画，图片转动view旋转等
微信小程序中的旋转动画.已下图为例图片右上角的音乐图标需要旋转,上代码 wxml <image class='yy' src='../image/yytb.png' animation='{{ ...
用canvas实现围绕旋转动画
使用canvas的convas来实现围绕旋转动画,外圈顺时针,里层逆时针代码demo链接地址代码demo链接地址 html文件 <!DOCTYPE html> <html> ...
html css动画自动旋转,不炫技，SVG+CSS3 旋转动画属性就能实现的梦幻效果
CSS3的动画相关的基础的属性基本都涉猎过了,个人认为,其中最复杂的是d:path()路径变形动画,超过3D,而位移.轨迹.旋转.缩放.斜切什么的,相对简单一些,但作为非动画设计师而言,灵活的掌握这些 ...
Three.js实现简单开门动画
Three.js实现简单开门动画先来看一下简单的开门动画实现效果,如下图所示: 可以看得出这个开门动画还是比较简单的,主要关键点有2个地方: 实现门围绕右门框旋转. 利用关键帧实现动画. 1.实现门 ...
Threejs开发之移动动画、旋转动画、缩放动画和路径动画
以下代码示例了threejs的移动动画.旋转动画.缩放动画和路径动画注意:引入three.js三维引擎的路径需要根据自己的情况修改相应的路径,本示例采用引用外部模块的方式. 以下为完整代码: & ...
高德地图 js API Loca 3D动画的使用说明
高德地图 js API Loca 3D动画的使用说明我们在使用 Loca 制作地图动画时,里面有几个对应的动画效果,有 center: 平移 pitch: 视角 zoom: 缩放 rotation: ...

js实现正方体旋转动画

js实现正方体旋转动画相关推荐

最新文章

热门文章