今天写点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. 【转】IDEA中xml文件头报错：URI is not registered (Settings | Languages & Frameworks | Schemas and DTDs）

    有时候在IDEA中配置spring文件时会出现这个错误  URI is not registered (Settings | Languages & Frameworks | Schemas ...

  2. 分布式文件系统之FastDFS

    环境引入: 在一个大型的教育官网,会拥有大量优质的视频教程,并且免费提供给用户去下载,文件太多如果高效存储?用户访问量大如何保证下载速度?分布式文件系统是解决这些问题的有效方法之一 一.什么是文件系统 ...

  3. 利用 Nginx 做反向代理解决微信小程序业务域名限制问题

    参考网站:(下述两个参考网站可以完美解决问题) https://www.jianshu.com/p/47eff6eeec25 https://www.cnblogs.com/kenwar/p/8288 ...

  4. /data/tomcat8/bin/setenv.sh

    --问题 Java HotSpot(TM) 64-Bit Server VM warning: ignoring option MaxPermSize=512m; support was remove ...

  5. J15W-J45W全铜截止阀厂家，J15W-J45W全铜截止阀价格 - 专题栏目 - 无极资讯网

    无极资讯网 首页 最新资讯 最新图集 最新标签   搜索 J15W-J45W全铜截止阀 无极资讯网精心为您挑选了(J15W-J45W全铜截止阀)信息,其中包含了(J15W-J45W全铜截止阀)厂家,( ...

  6. SpringBoot内嵌Tomcat开启APR模式(运行环境为Centos7)

    网上查到的一些springboot内嵌的tomcat开启apr的文章,好像使用的springboot版本较老,在SpringBoot 2.0.4.RELEASE中已经行不通了.自己整理了一下,供参考. ...

  7. ionic3 cordova 调取软键盘

    应用场景,因为兼容ios,安卓问题,不能直接调用激活软键盘方法.只有在点击按钮时让input框自动获取焦点,激活软键盘.然后把input框定位在键盘上方,软键盘激活可以监听到键盘高度. 先下载keyb ...

  8. springboot和quartz整合分布式多节点

    虽然单个Quartz实例能给予我们很好的任务job调度能力,但它不能满足典型的企业需求,如可伸缩性.高可靠性满足.假如你需要故障转移的能力并能运行日益增多的 Job,Quartz集群势必成为你应用的一 ...

  9. MySQL对结果进行排序order by

    order by {col_name | expr | position} [ASC | DESC] 查询结果     排序条件的顺序  决定   排序条件   的优先级 如果同一条件下值相等,那么启 ...

  10. selenium+Python(鼠标和键盘事件)

    本篇总结了 web 页面常用的一些操作元素方法,可以统称为行为事件有些 web 界面的选项菜单需要鼠标悬停在某个元素上才能显示出来(如百度页面的设置按钮). 1 简单操作 1.点击(鼠标左键)页面按钮 ...