今天写点css3，3d属性写的3d盒子，结合javascript让盒子随鼠标旋转起来

今天带了css3新属性3d

<!DOCTYPE html>

<html>

	<head>

		<meta charset="UTF-8">

		<title></title>

		<style type="text/css">

			#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();

			}

		</style>

	</head>

	<body>

		<div id="a">

			<div>前</div>

			<div>后</div>

			<div>上</div>

			<div>下</div>

			<div>左</div>

			<div>右</div>

		</div>

	</body>

	<script type="text/javascript">

		var a=document.getElementById("a")

		var x;

		var y;

		a.onmousedown=function(ev){ //在div上摁下时

			x=ev.clientX        //获取当前鼠标的位置

			y=ev.clientY

			document.onmousemove=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.onmouseup=function(){

				document.onmousemove=null;

			}

		}

	</script>

</html>　

效果

css3+javascript旋转的3d盒子的更多相关文章

  1. 纯CSS3实现一个旋转的3D立方体盒子

    简单介绍 上网易前端微专业课程,里面有一个课外作业是实现一个3D旋转立方体.花了点时间做了下.还有点意思.写个简单教程.供大家学习. 先放上终于要实现的效果 注:代码在chrome 43.0.2357 ...

  2. [应用][js+css3]3D盒子导航[PC端]

    CSS3构建的3D盒子之导航应用 1.在用css3构建的盒子表面,放上iframe,来加载导航页面. 2.鼠标左键按下移动可旋转盒子,寻找想要的网址. 3.左键单机盒子表面,将全屏现实所点盒子表面的网 ...

  3. 【CSS3练习】3D盒子制作

    先发个3D盒子最终效果图 在线效果预览:http://dtdxrk.github.io/game/css3-demo/box-3d.html 制作步骤1:创建基本结构 分布把6个面定义到3×3的画布上 ...

  4. CSS3制作旋转导航

    慕课网学习CSS3时,遇到个习题,觉得有必要总结学习下:CSS3制作旋转导航 慕课网习题地址:http://www.imooc.com/code/1883 示例及源码地址:http://codepen ...

  5. 可拖拽的3D盒子

    代码地址如下:http://www.demodashi.com/demo/11453.html   一直想做一个立体的盒子,前段时间刚好看见掘金上有位朋友发了篇关于3d盒子的文章,看了决定自己做一下, ...

  6. CSS3带你实现3D转换效果

    前言 在css3中允许使用3D转换来对元素进行格式化,在原本只是2D转化的平面中引入了Z轴.在这之前我们讲解了css3中的2D转换,也就是二维空间变换,本篇的3D转换就是基于原来的2D转换而来,与2D ...

  7. 使用 CSS3 动画实现的 3D 图片过渡特效

    这是一个基于 CSS3 动画实现的图片过渡效果,共有 Flip.Rotation.Multi-flip.Cube.Unfold 等6种效果,它们将证明 CSS3 Transform 和 Transit ...

  8. HTML5&CSS3&JavaScript&PHP&MySQL学习笔记

    1.在文字间添加一条水平线  使用<hr />  注意该符号不是成对出现的 2.<q> </q>用来标记于段落中的较短引用,浏览器会在它之间的语句两端加上双引号. ...

  9. CSS3 Flex Box（弹性盒子）

    CSS3 Flex Box(弹性盒子) 一.简介 弹性盒子是 CSS3 的一种新的布局模式. CSS3 弹性盒( Flexible Box 或 flexbox),是一种当页面需要适应不同的屏幕大小以及 ...

随机推荐

  1. css ie6双倍margin现象

    IE6双倍margin bug 当出现连续浮动的元素,携带和浮动方向相同的margin时,队首的元素,会双倍marign. 解决方案: 1)使浮动的方向和margin的方向,相反. 所以,你就会发现, ...

  2. CoreImage 图片处理

    CoreImage 是苹果 iOS5新增的一个 OC 框架,提供了强大的图像处理功能, 用于对基于像素的图像进行操作与分析, 提供了很多滤镜(Filter),形成强大的自定义效果 CIImage 类 ...

  3. vue嵌套路由-query传递参数（三）

    在嵌套路由中我们经常会遇到父路由向子路由里面传递参数,传递参数有两种方法,通过 query 或者 params index.html <div id="app"> &l ...

  4. vue-lazyload图片懒加载的简单使用

    一.vue lazyload插件: 插件地址:https://github.com/hilongjw/vue-lazyload demo:http://hilongjw.github.io/vue-l ...

  5. 论文阅读 | FPN：Feature Pyramid Networks for Object Detection

    论文地址:https://arxiv.org/pdf/1612.03144v2.pdf 代码地址:https://github.com/unsky/FPN 概述 FPN是FAIR发表在CVPR 201 ...

  6. int和double究竟占多少个字节？c++等

    最近在看深入理解计算机系统这本书,上面提到了在32位机器和64机器中int类型都占用4个字节.后来,查了The C Programming language这本书,里面有一句话是这样的:Each co ...

  7. EXTJS文档地址

    文档地址:http://docs.sencha.com/extjs/4.2.3/#!/api/Ext.form.field.Field-event-change

  8. Math.round、Math.floor、Math.ceil 区别

    1.Math.round() 按照四舍五入的方式返回值 例如:Math.round(9.5)=10    Math.round(9.4)=9 2.Math.floor()返回最小整数 例如:Math. ...

  9. webstorm 上传代码到gitlab

    1. 2. 3.push 4.填写上传url

  10. 批量修改dos文件到unix

    1. 安装dos2unix 2. 执行:find ./ -type f | xargs dos2unix