---恢复内容开始---

今天咱们来说一下,CSS中的3D效果

.如果你把transform真的掌握的和纯熟的话,就可以直接通过CSS做出很多很炫酷的效果,甚至.轮播图和选项卡都可以通过CSS来做,咱们明天就说如何运用CSS来做轮播图,大家记得看哦!

很好,话不多说,翠花'上代码':

  1.  <!DOCTYPE html>
  2.  <html>
  3.  <head>
  4.      <meta charset="UTF-8">
  5.      <title>ITandYT</title>
  6.      <style type="text/css">
  7.          #box{
  8.              width: 200px;
  9.              height: 200px;
  10.              margin: 200px auto;
  11.              position: relative;
  12.  
  13.              /*给父级设置3d空间*/
  14.              transform-style: preserve-3d;
  15.              /*设置景深*/
  16.              /*perspective: 800px;*/
  17.              transform: perspective(8000px) rotateY(-60deg) rotateX(30deg);
  18.          }
  19.  
  20.          #box div{
  21.              width: 100%;
  22.              height: 100%;
  23.              border: 1px solid black;
  24.              position: absolute;
  25.              opacity: 0.7;
  26.          }
  27.          /*前面*/
  28.          #box div:nth-child(1){
  29.              background: palegreen;
  30.              transform: translateZ(100px);
  31.          }
  32.          /*后面*/
  33.          #box div:nth-child(2){
  34.              background: palevioletred;
  35.              transform: translateZ(-100px);
  36.          }
  37.          /*左面*/
  38.          #box div:nth-child(3){
  39.              background: plum;
  40.              transform: translateX(-100px) rotateY(90deg);
  41.          }
  42.          /*右面*/
  43.          #box div:nth-child(4){
  44.              background: peru;
  45.              transform: translateX(100px) rotateY(90deg);
  46.          }
  47.          /*上面*/
  48.          #box div:nth-child(5){
  49.              background: palegoldenrod;
  50.              transform: translateY(-100px) rotateX(90deg);
  51.          }
  52.          /*下面*/
  53.          #box div:nth-child(6){
  54.              background: paleturquoise;
  55.              transform: translateY(100px) rotateX(90deg);
  56.          }
  57.          img{
  58.              width:200px;
  59.              height: 100%;
  60.          }
  61.      </style>
  62.  </head>
  63.  <body>
  64.  <div id="box">
  65.      <div><img src="010.jpg"/></div>
  66.      <div><img src="010.jpg"/> </div>
  67.      <div><img src="010.jpg"/> </div>
  68.      <div><img src="010.jpg"/> </div>
  69.      <div><img src="010.jpg"/> </div>
  70.      <div><img src="010.jpg"/> </div>
  71.  </div>
  72.  
  73.  <script type="text/javascript">
  74.  
  75.      // 获取元素
  76.      var oDiv = document.querySelector('#box');
  77.      var x = 30;
  78.      var y = -60;
  79.      oDiv.onmousedown = function(ev){
  80.          var event = window.event || ev;
  81.          var disY = event.clientX - y;
  82.          var disX = event.clientY - x;
  83.  
  84.          document.onmousemove = function(ev){
  85.              var event = window.event || ev;
  86.              // 计算偏移角度
  87.              x = event.clientY - disX;
  88.              y = event.clientX - disY;
  89.              oDiv.style.transform = 'perspective(800px) rotateY('+y+'deg) rotateX('+x+'deg)'
  90.          }
  91.          document.onmouseup = function(){
  92.              document.onmousemove = null;
  93.          }
  94.          return false;
  95.      }
  96.  
  97.  </script>
  98.  </body>
  99.  </html>

图片没有的话就其他的代替哦!

是不是很简单,你学会了吗???没学会也不要紧,直接把本上神的复制走吧!绝对能用哦!

纯熟原创,禁止未经允许私自转载!

---恢复内容结束---

CSS3,transform3D立体可拖拽正方体实现原理的更多相关文章

  1. HTML5图片拖拽预览原理及实现

    一.前言 这两天恰好有一位同事问我怎样做一个图片预览功能.作为现代人的我们首先想到的当然是HTML5啦,其实HTML5做图片预览已经是一个老生常谈的问题了.我在这里就简单说说其中相关的一些东西,当然会 ...

  2. jquery图片查看插件，支持旋转、放大、缩小、拖拽、缩略图（仿qq图片查看）

    最近做了一个jquery图片查看的插件,目的是能精确查看图片的详情,插件支持图片旋转.放大.缩小.拖拽.缩略图显示,界面效果是按照window的qq查看图片功能写的,当然不尽相同. 具体功能: 1. ...

  3. 拖拽对DOM的影响

    前一段时间公司要对上传列表中多文本输入框添加富文本编辑功能,所以最初的想法是引入富文本编辑器插件,对每个多文本输入框实例化一次.但是上传列表还有一个可以拖拽排序的功能,在初次实例化以后,再拖拽元素就会 ...

  4. 这交互炸了(四) :一分钟让你拥有微信拖拽透明返回PhotoView

    本文已授权微信公众号:鸿洋(hongyangAndroid)原创首发 <交互炸了>或许是一系列高端特效教程, 文中会介绍一些比较炫酷的特效,以及实现的思路.特效实现本身也许不会有太大的难度 ...

  5. 【转】IE沙箱拖拽安全策略解析

    https://xlab.tencent.com/cn/2015/12/17/ie-sandbox-drop-security-policy/ IE沙箱逃逸是IE浏览器安全研究的一个重要课题,其中有一 ...

  6. 自由拖拽DIV实现

    最近在做的项目有个效果是要实现div随意拖拽改变大小,前端框架选择的是vue.js,UI用的是element,拖拽效果可以很简单的实现,但是在拖拽过程中发现会对其他元素实现全选效果,因此最后选择使用元 ...

  7. 一步一步实现JS拖拽插件

    js拖拽是常见的网页效果,本文将从零开始实现一个简单的js插件. 一.js拖拽插件的原理 常见的拖拽操作是什么样的呢?整过过程大概有下面几个步骤: 1.用鼠标点击被拖拽的元素 2.按住鼠标不放,移动鼠 ...

  8. Android学习系列(12)--App列表之拖拽GridView

    根据前面文章中ListView拖拽的实现原理,我们也是很容易实现推拽GridView的,下面我就以相同步骤实现基本的GridView拖拽效果.     因为GridView不用做分组处理,代码处理起来 ...

  9. 原生js简单实现拖拽效果

    实现弹窗拖拽效果的原理是:按下鼠标并移动——拖拽移动物体,抬起鼠标——停止移动.主要触发三个事件:onmousedown.onmousemove以及onmouseup: 首先搭建结构:一个宽350px ...

随机推荐

  1. 2016级算法第五次上机-D.AlvinZH的学霸养成记III

    850 AlvinZH的学霸养成记III 思路 难题.概率DP. 第一种思考方式:直接DP dp[i]:从已经有i个学霸到所有人变成学霸的期望. 那么答案为dp[1],需要从后往前逆推.对于某一天,有 ...

  2. 复制订阅服务器和 AlwaysOn 可用性组 (SQL Server)

    https://docs.microsoft.com/zh-cn/sql/database-engine/availability-groups/windows/replication-subscri ...

  3. 03. PNG,GIF,JPG的区别及如何选？

      3.PNG,GIF,JPG的区别及如何选? 照片用 JPG. 动画用 GIF. Logo.Icon 等小图用 PNG-8. 非特殊情况,尽量不要用 PNG-24 和 PNG-32.  

  4. 用Javac编译Java文件时出现“编码 GBK 的不可映射字符“的error

    前提:JDK版本 >= 1.6会出现编译报错, 1.6前只会是警告 以下是javac的document: 遇到这种情况的原因是: 文件编码格式与编译器编译所选的encoding不同,有非英文字符 ...

  5. spark第十一篇：spark-submit命令支持选项

    [root@linux-node3 bin]# ./spark-submit --help Usage: spark-submit [options] <app jar | python fil ...

  6. sort sorted() reverse() reversed() 的区别

    sort()是可变对象(字典.列表)的方法,无参数,无返回值,sort()会改变可变对象,因此无需返回值.sort()方法是可变对象独有的方法或者属性,而作为不可变对象如元组.字符串是不具有这些方法的 ...

  7. C++下混合编译c语言方法总结

    最近在读SGI STL源码,感觉对C++的学习很有帮助,之前对于泛型.iterator.traits等等各种特性的概念非常模糊,通过这两天的琢磨,再加上<STL 源码剖析>的帮助,对C++ ...

  8. AngularJs学习笔记--Creating Services

    原版地址:http://docs.angularjs.org/guide/dev_guide.services.creating_services 虽然angular提供许多有用的service,在一 ...

  9. CentOS7 wget 安装Redis，开机启动配置

      安装 GCC yum install gcc yum install tcl 安装wget yum install wget 1. 下载Redis wget http://download.red ...

  10. C#利用WebBrowser获取完整COOKIE

    代码: http://www.cnblogs.com/hsapphire/archive/2010/09/10/1823384.html http://blog.csdn.net/attilax/ar ...