今天写点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. js 自定义获得类class和获得id

    使用js获取类名,但是低版本浏览器不支持getElementsByClassName,所以我们就需要自定义getClassName,方便跨浏览器使用. 当然,如果采用jquery就不需要. //获取类 ...

  2. java中引用

    java中引用分为,强,弱,虚,软 (1)强引用 使用最普遍的引用.如果一个对象具有强引用,它绝对不会被gc回收.如果内存空间不足了,gc宁愿抛出OutOfMemoryError,也不是会回收具有强引 ...

  3. leetcode 44 字符匹配

    题意:s是空串或包含a-z字母: p为包含a-z字母或?或 * (其中*可以匹配任意字符串包括空串,?可以匹配任意字符). 思路: 1)特殊情况:当s为空串时,p为连续 * 时,则连续 * 的位置都为 ...

  4. makedown学习笔记（以后可能会用makedown写博客）

    学习手册 https://www.zybuluo.com/mdeditor?url=https%3A%2F%2Fwww.zybuluo.com%2Fstatic%2Feditor%2Fmd-help. ...

  5. 导出excel设置样式（Aspose.Cells）

    Aspose.Cells.Style style = xlBook.Styles[xlBook.Styles.Add()];style1.Pattern = Aspose.Cells.Backgrou ...

  6. Mac os x的发展

    OS X(前称Mac OS X)是苹果公司为麦金塔电脑开发的专属操作系统.Mac OS X于1998年首次推出,并从2002年起随麦金塔电脑发售.它是一套Unix基础的操作系统,包含两个主要的部分:核 ...

  7. C语言实现全排列和回溯法总结

    一.递归实现全排列 #include"cstdio" ]; void print_permutation(int n,int *A,int cur){ if(cur==n){ ;i ...

  8. (转)用mysql自带工具mysqlslap对数据库进行压力测试

    http://aolens.blog.51cto.com/7021142/1901557-------用mysql自带工具mysqlslap对数据库进行压力测试 mysqlslap是mysql自带的工 ...

  9. Js框架设计之DomReady

    一.在介绍DomReady之前,先了解下相关的知识 1.HTML是一种标记语言,告诉我们这页面里面有什么内容,但是行为交互则要通过DOM操作来实现,但是注意:不要把尖括号里面的内容看作是DOM! 2. ...

  10. poj 2405 Beavergnaw

    Beavergnaw Time Limit: 1000MS   Memory Limit: 65536K Total Submissions: 6310   Accepted: 4158 Descri ...