今天写点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. 实现CTF智能合约题目的环境部署

    本文章是参考一位大佬博客学来的. 智能合约题的环境主要包括两部分:一个是智能合约的部署,另一个就是监听合约事件进而发送flag的脚本. 智能合约部署 这里写的合约是指solidity合约,使用Remi ...

  2. orange1

  3. 学习python 3 入门知识

    1.安装 http://www.runoob.com/python3/python3-install.html https://www.python.org/ 2.使用 工具一:IDLE IDLE 是 ...

  4. Net操作Excel，不依赖服务器端环境配置（终极方法NPOI）转。

    这是起因,为什么会需要用到这个,主要是分析了一下为什么从oledb那个方式换成这个方式.文章见链接 http://www.cnblogs.com/Jerseyblog/p/6410703.html 前 ...

  5. (转)shell变量及扩展

    1.shell变量 shell变量赋值语句为”name=[value]“,等号两边不能有空格,可以给shell变量追加内容”name+=value“,取消shell变量的设置使用”unset name ...

  6. ubuntu系统复制到其他地方或克隆后，如何正确修改IP及MAC地址的解决方案（图文详解）

    修改ip地址 永久修改MAC地址 方法一: 1)编辑“/etc/init.d/rc.local”文件(sudo gedit /etc/init.d/rc.local) 2)在此配置文件的最后面加上如( ...

  7. 【JS】逻辑运算符 非！ 与&& 或||

    JS中的逻辑运算符在处理布尔值的判断时,和其他语言没有什么不同,不过在处理对象时,就需要好好梳理记忆下了. 逻辑非(!) 如果一个操作数是一个对象,返回false; 如果一个操作数是一个空字符串,返回 ...

  8. orcale 之函数

    我们知道存储过程的调用是一条 PL/SQL 语句.那么对于一些表达式我们用什么呢?这里函数的功能就会体现出来了. 函数和过程在创建方式上有很多的类似地方,也是编译后放入内存中以供用户使用,只不过函数调 ...

  9. PHP代码语法验证插件：SublimeLinter

    1.调出控制台 Ctrl+Shift+P,输入 install package,Enter

  10. android 9 patch