360度立体抽奖盒

<!DOCTYPE html>

<head>

<title>Document</title>

<style>

html,body,ul {margin: 0;padding: 0;}

body {perspective: 1200px;overflow: hidden;}

ul {

position: relative;

width: 200px;

height: 200px;

margin: 100px auto;

-webkit-transition: preserve-3d;

-moz-transition: preserve-3d;

-ms-transition: preserve-3d;

transition: 5s ease-out;

-webkit-transform-style: preserve-3d;

-moz-transform-style: preserve-3d;

-ms-transform-style: preserve-3d;

transform-style: preserve-3d;

cursor: pointer;

}

ul li {

position: absolute;

top: 0;

left: 0;

width: 100%;

height: 100%;

list-style: none;

color: #fff;

font-size: 24px;

text-align: center;

line-height: 200px;

border-radius: 10%;

}

li:nth-child(1) {

background: rgba(145, 41, 55, 0.9);

-webkit-transform: translateZ(100px);

-moz-transform: translateZ(100px);

-ms-transform: translateZ(100px);

-o-transform: translateZ(100px);

transform: translateZ(100px);

}

li:nth-child(2) {

background: rgba(54, 49, 46, 0.9);

-webkit-transform: rotateY(90deg) translateZ(100px);

-moz-transform: rotateY(90deg) translateZ(100px);

-ms-transform: rotateY(90deg) translateZ(100px);

-o-transform: rotateY(90deg) translateZ(100px);

transform: rotateY(90deg) translateZ(100px);

}

li:nth-child(3) {

background: rgba(149, 121, 123, 0.9);

-webkit-transform: translateZ(-100px);

-moz-transform: translateZ(-100px);

-ms-transform: translateZ(-100px);

-o-transform: translateZ(-100px);

transform: translateZ(-100px);

}

li:nth-child(4) {

background: rgba(102, 99, 79, 0.9);

-webkit-transform: rotateY(-90deg) translateZ(100px);

-moz-transform: rotateY(-90deg) translateZ(100px);

-ms-transform: rotateY(-90deg) translateZ(100px);

-o-transform: rotateY(-90deg) translateZ(100px);

transform: rotateY(-90deg) translateZ(100px);

}

li:nth-child(5) {

background: rgba(197, 113, 84, 0.9);

-webkit-transform: rotateX(90deg) translateZ(100px);

-moz-transform: rotateX(90deg) translateZ(100px);

-ms-transform: rotateX(90deg) translateZ(100px);

-o-transform: rotateX(90deg) translateZ(100px);

transform: rotateX(90deg) translateZ(100px);

}

li:nth-child(6) {

background: rgba(219, 184, 143, 0.9);

-webkit-transform: rotateX(-90deg) translateZ(100px);

-moz-transform: rotateX(-90deg) translateZ(100px);

-ms-transform: rotateX(-90deg) translateZ(100px);

-o-transform: rotateX(-90deg) translateZ(100px);

transform: rotateX(-90deg) translateZ(100px);

}

</style>

</head>

<body>

<li>IPhone</li>

<li>Sugar</li>

<li>Thanks</li>

</ul>

window.onload = function(){

wrap.style.cssText = "transform: rotateX(360deg) rotateY(360deg);transition: 1s ease-out;"

}

var wrap = document.getElementById(‘box‘);

var degArr = [-360,-270,-180,-90,0,90,180,270,360]; //各个面对应角度

wrap.onclick = function(){

var round = 4 + Math.floor(Math.random()*9); //旋转圈数

var randX = Math.floor(Math.random()*9); //随机X

var randY = Math.floor(Math.random()*9); //随机Y

var degX = round*360+degArr[randX];

var degY = round*360+degArr[randY];

wrap.style.cssText = "transform: rotateX("+degX+"deg) rotateY("+degY+"deg)";

}

</script>

</body>

</html>

WEB前端学习交流群21 598399936

时间： 2024-10-13 16:46:59

360度立体抽奖盒的相关文章

html5人物图片360度立体旋转

体验效果:http://hovertree.com/texiao/html5/10.htm 下载:http://hovertree.com/hvtart/bjae/t16oddyt.htm 代码如下: <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>Full 360 degree View - HoverTree</title> <sty

如何对三维立体图形进行360度无死角观察呢？

我们在日常CAD绘图设计工作中,常常会接触到各种各样不同的三维立体图形.为了保证绘图的精准度,我们需要对绘制好的三维立体图形进行360度无死角观察.那么我们该如何具体操作呢?小编今天就和大家具体的讨论一下.演示步骤如下: 步骤一:绘制三维立体图形CAD图纸首先我们先运行迅捷CAD编辑器专业版,然后打开或是重新绘制一张三维立体图形的CAD图纸. 步骤二:命令字符调用相应的动态观察指示我们选择在命令框里进行以下命令指示操作: 1.我们在命令行输入"3DORBIT"命令字符,,调用约束动

政府展示360全景应用，虚拟馆360度展示解决方案

政府需求分析: 1.数字城市.360全景城市风采展示 2.园区规划,招商引资,打造城市和产业园区的电子名片 3.大力发展在线城市管理体系:城市应急系统.城管.消防.安全等电子系统 4.大型经济和文化招商会.博览会.运动会宣传展示 5.非物质文化遗产宣传展示 6.名胜古迹宣传展示,打造低碳绿色旅游产业 360全景的特点: 1.水平垂直各360全景,一共360度视角,没有任何视线盲点,想看哪里就看哪儿; 2.全部是实景拍摄,真实立体; 3.高清晰度,采用专业自改制高像素相机; 4.互动性强,鼠标随意

怎么样拍摄360度全景？

360全景不是凭空生成的,要制作一个360全景,我们需要有原始的图像素材,原始图像素材的来源可以是: A.在现实的场景中,使用相机的全景拍摄功能得到的鱼眼图像 B.通过建模渲染得到的虚拟图像下文中的表格对比了在不同的设备.拍摄机位.拼合模式.拍摄难度下所能获得到的鱼眼图像要拍摄全景素材我们需要用到一些专业设备,如下: 数码单反相机 360全景拍摄硬件配备-数码单反相机首先让我们来认识一下什么是数码单反相机.说白了,数码单反相机就是使用了单反新技术的数码相机.作为专业级的数码相机,用其拍摄出

360度评价反馈有哪些使用场景？

作为支持组织管理及领导力发展的工具,360度评估反馈是组织人才管理战略的重要组成部分.它能够评估员工的优缺点,并作为培训或教练计划的出发点.因为360度评估反馈具有全面性,所以它能够有效区分出那些表现优秀的员工.刚刚符合期望的员工以及亟待发展的员工.当然,这些评估结果远不止帮助企业创造利润,影响员工的评定.培养以及留任:更能在员工的关键行为.能力和工作标准间建立一致性.从人才管理的业务出发,360度评估反馈在人才管理的多个方面发挥作用. 发展领导力360度评估反馈法在领导力发展的整个生命周期中有

虚幻UE4中如何采集360度全景图片和VR视频

如何使用虚幻4来制作一个VR视频播放器呢,简单来讲,使用虚幻4的视频采集插件来获取图像,并对图像进行处理,就能获取我们需要的图像了,下一步,你可以把图像投影到一个360度球体上,就能形成球形的播放器了. 1.插件测试-采集单帧双眼图像打开Epic Games Launcher,启动引擎(我使用的版本为4.14.0).在弹出的对话框中点击New Project标签栏,再选择C++标签页,选择Vehicle Advanced模板,并将项目命名为STEREOSCOPIC.最后点击CreateProj

360度图片旋转

<!DOCTYPE html> <html lang="zh-CN"> <head> <meta charset="utf-8"> <title>CSS3鼠标悬停360度旋转效果 </title> <style> * { margin:0; padding:0; list-style:none; } body { background:#1F1F1F; } .zzsc { width

企业遇到什么问题有必要做360度评估？

许多人力资源从业者在推动360度评估项目是,希望能够找到一些更为量化的评估角度来考察360度项目推进的时机.可以试着参考以下指标,如果有三项以上符合你所在的组织的情况,就应该考虑是否引入360度评估反馈技术,以及该如何设计和实施360度评估反馈技术. 一年内出现过新晋管理者不够胜利,“提拔错了人”的情况: 管理者与员工之间.管理者之间关系紧张,频繁发生冲突: 管理者对提升自我并无动力,被动学习: 管理者成熟度偏低.长期无改善: 管理者不知道如何发展: 高潜员工抱怨企业对他们的关注不足: 培训需求

[JavaScript案例]360度全景照片

案例: 360度全景照片鼠标在页面上滑动时图片表现的物体会随着移动方向进行旋转,从而呈现360度物体旋转效果思路: 将所有的图片都放入指定容器内,通过切换相应的照片隐藏与显示来实现旋转效果代码: <!DOCTYPE html> <html lang="zh-CN"> <head> <meta charset="UTF-8"> <meta id="viewport" name="