今天写点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. 北航软院2012级C#期末考试部分考题解答

    博主注:本渣渣水平有限,文中若有不对的地方敬请指出,谢谢. 本文中大部分图片来自老师的PPT,感谢邵老师,想要的可以点击右边QQ联系我:) 一.选择题(2*15=30) 1.In C# what is ...

  2. vue中vueRouter使用

    首先需要安装依赖:

  3. CentOS虚拟机断电或强制关机，再开机出现问题：Entering emergency mode. Exit the shell to continue.

    解决问题: 输入命令:xfs_repair -v -L /dev/dm-0

  4. Codeforces Round #545 (Div. 2) 题解

    题目链接 A. Sushi for Two 题意 在一个 01 序列中找出长为偶数的连续的一段使得它前一半和后一半内部分别相同,而前一半和后一半不同. \(2\le n\le 100\ 000\) 题 ...

  5. [转] kerberos安装配置与使用

    [From] https://blog.csdn.net/lovebomei/article/details/79807484 1.Kerberos协议: Kerberos协议主要用于计算机网络的身份 ...

  6. javascipt中数组的常见操作

    1.与lua不同,即使数组中间有null或者undefined,仍然能求出正确的长度 2.length 改变.length也会改变数组的大小 3. indexOf arr.indexOf(a)会返回第 ...

  7. python计算π及进度条显示

    今天老师布置了一个课后作业,去尽可能的准确计算π的值,还要显示时间和进度条,对于python小白的我,当然是综合书上和网上的知识,自己做了一个小程序,代码如下: 一.写代码的准备工作:用pip下载第三 ...

  8. 转：五年java人的一点感悟

    转自:五年java人的一点感悟 恍然间,发现自己在这个行业里已经摸爬滚打了五年了,原以为自 己就凭已有的项目经验和工作经历怎么着也应该算得上是一个业内比较资历的人士了,但是今年在换工作的过程中却遭到了 ...

  9. SQL语句模糊查询年月

    <if test="uploadTime != null" > <![CDATA[ and date_format(w.upload_time, '%Y%m') ...

  10. 【TensorFlow】-精选Github开源项目

    转至:http://www.matools.com/blog/1801988 留底做个记录,有空在做验证. TensorFlow源码 https://github.com/tensorflow/ten ...