html3d盒子旋转,css3+javascript怎么做一个旋转的3d盒子?
今天写点css3,3d属性写的3d盒子,结合javascript让盒子随鼠标旋转起来
今天带了css3新属性3d
#a{
width: 200px;
height: 200px;
margin: 200px auto;
position:relative; /*给父元素相对定位*/
transform-style: preserve-3d; /*父元素设为3d*/
transform: perspective(1000px) rotateY(30deg) rotateX(30deg); /*设置父元素得景深*/
}
#a>div{
position:absolute;/*盒子每面的默认样式*/
width: 200px;
height: 200px;
border: 1px solid #000000;
text-align: center;
line-height: 200px;
}
#a>div:nth-child(1){
transform: translateZ(100px);/*前面盒子宽为200px所以先向前位移100px*/
background: rgba(0,0,255,0.2);
}
#a>div:nth-child(2){
transform: translateZ(-100px);/*第二元素向后位移100px 这样盒子前后面就有了*/
background: rgba(0,255,0,0.2);
}
#a>div:nth-child(3){
transform: rotateX(90deg) translateZ(100px);/*第三个让他平躺下,也就是x轴旋转90°,旋转后在位移,这样就会向他面对的那面去位移*/
background: rgba(255,0,0,0.2);
}
#a>div:nth-child(4){
transform: rotateX(90deg) translateZ(-100px);
background: rgba(255,255,0,0.2);
}
#a>div:nth-child(5){
transform: rotateY(90deg) translateZ(-100px);
background: rgba(0,255,255,0.2);
}
/ /*总结就是先旋转在位移,z轴就是div面向那面那面将会是z所以说先旋转在位移这样位移也就是100px 和 -100px 的事*/
#a>div:nth-child(6){
transform: rotateY(90deg) translateZ(100px);
background: rgba();
}
var a=document.getElementById("a")
var x;
var y;
a.οnmοusedοwn=function(ev){ //在div上摁下时
x=ev.clientX //获取当前鼠标的位置
y=ev.clientY
document.οnmοusemοve=function(ev){//鼠标移动时
var x1=ev.clientX-x+30 //当前位置减去下时鼠标的位置,就获取移动了多少度,应为一开始有初始角度所以加30°
var y1=ev.clientY-y-30
//甚至样式每次鼠标移动式更改样式
a.style.transform="perspective(1000px) rotateY("+ x1 +"deg) rotateX("+ -(y1) +"deg)";
}
document.οnmοuseup=function(){
document.οnmοusemοve=null;
}
}
效果
html3d盒子旋转,css3+javascript怎么做一个旋转的3d盒子?相关推荐
- 教你用CSS3做一个旋转的宇宙星球
教你用CSS3做一个旋转的宇宙星球 可能略有瑕疵,无非就是先画一个圆圈,把小球定位到上面,然后再让圆圈旋转即可 直接上效果图 代码 <!DOCTYPE html><html lang ...
- 利用css样式表做一个旋转写轮眼
利用css样式表做一个旋转写轮眼 成品效果图 首先分析效果图 图中有红色背景圈和里面的三个椭圆和最中心的黑圈组成. 因此,我们应该写一个大的div盒子,来装这三个椭圆div,里面的三个椭圆div和圆的 ...
- 用html和css做一个旋转的正方体
用html和css做一个旋转的正方体 <!DOCTYPE html> <html lang="en"> <head><meta chars ...
- 用Three.js做一个简单的3D场景
Three.js是什么 Three.js 是一款运行在浏览器中的 3D 引擎,我们可以用它来创造我们所需要的一系列3D动画场景,简而言之就是建在网页上的3D模型.利用Three.js可以制作出很多酷炫 ...
- 可以帮我做一个python的3D飞机小游戏吗
当然可以!我很乐意帮助你做一个 Python 的 3D 飞机小游戏. 如果你是 Python 初学者,我建议你先了解一些 Python 的基础知识,包括变量.数据类型.流程控制语句.函数等.这些知识都 ...
- CSS3 做一个旋转的立体3D正方形 动效核心【前端就业课 第二阶段】CSS 零基础到实战(07)
若是大一学子或者是真心想学习刚入门的小伙伴可以私聊我,若你是真心学习可以送你书籍,指导你学习,给予你目标方向的学习路线,无套路,博客为证. 一.transform-origin transform-o ...
- SceneKit做一个旋转的地球效果
SceneKit可以用寥寥几行帮你完成很多OpenGL复杂的3D设置代码,下面本猫就带大家完成一个旋转的3D地球的场景. 首先需要地球表面图片,将其导入到Xcode中: 我们用SceneKit内置的几 ...
- html 背景图片自动旋转,CSS3 菱形拼图实现只旋转div 背景图片不旋转功能
需求背景 使用 vue 做的项目,业务需求有一个拼图效果,默认是深色的背景图,上面分五个区域,每次会亮一个区域,整张图都亮,拼图完成.先来看一下最终的效果图. 应用到的知识点: background- ...
- html如何图片立体自动旋转,css3如何让图片不停旋转?
本篇文章将要给大家详细介绍如何使用css3让图片实现不停旋转的效果,我们在进行网页页面设计时,经常会遇到各种关于图片展示的问题,比如有的需要让图片圆角展示.图片点击放大展示等等效果. 下面主要就给大家 ...
最新文章
- local_response_normalization 和 batch_normalization
- 由浅入深:自己动手开发模板引擎——解释型模板引擎(二)
- C# mciSendString()实现循环播放音乐
- 使用 C++0x 时 make_shared 完美转发构造函数参数的测试编译器
- 贷款被拒,因为你的征信黑洞太多
- Java—— TCP协议(相关代码实现以及相关优化)
- IIC通信---EEPROM24C02---STMF4
- 2020年中国冷链物流行业发展报告
- nginx忽略文件名大小写
- 微软开放Xbox 360游戏开发平台
- redis查询key的数量
- 3. Browser 对象 - Navigator 对象
- 测试Leader应该做哪些事
- 【图像处理】基于matlab GUI数字图像处理【含Matlab源码 652期】
- UART0串口编程系列之前奏篇
- @synthesize 和 @dynamic 分别表示什么
- spring编译源码 spring-cglib-repack-3.2.7.jar和spring-objenesis-repack-2.6.jar 缺失解决办法 groovy eclipse插件安装
- 简单谈谈语音评测(语音评价)
- 腾讯推页游平台’”页游乐园”YY.QQ.com
- 王兴:淘宝为什么还不支持微信支付?
热门文章
- 力扣让我心碎的第六天
- 莫比乌斯环matlab代码,《莫比乌斯时空》:当《神秘博士》遇上《源代码》
- 独家数据!一季度智驾交付增速放缓,降本压力下的众生相
- 【工具】FastStone Capture(FSCapture) 注册码
- 韩国研究生留学能跨专业学计算机吗,韩国硕士留学如何申请 留学韩国硕士可以读什么专业...
- Java重写hashcode方法
- vicuna-13b与ChatGPT3.5对决,GPT4为裁判的80道考题,中文机翻版
- Gradle Sync Error : ANDROID_HOME 与 ANDROID_SDK_ROOT 指向不一致
- 为何他们用了那么多人工智能却做不出一台好电视?
- 护眼台灯哪个品牌更好?2022年最值得入手的护眼台灯