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

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

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

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

 <!DOCTYPE html>

 <html>

 <head>

     <meta charset="UTF-8">

     <title>ITandYT</title>

     <style type="text/css">

         #box{

             width: 200px;

             height: 200px;

             margin: 200px auto;

             position: relative;

             /*给父级设置3d空间*/

             transform-style: preserve-3d;

             /*设置景深*/

             /*perspective: 800px;*/

             transform: perspective(8000px) rotateY(-60deg) rotateX(30deg);

         }

         #box div{

             width: 100%;

             height: 100%;

             border: 1px solid black;

             position: absolute;

             opacity: 0.7;

         }

         /*前面*/

         #box div:nth-child(1){

             background: palegreen;

             transform: translateZ(100px);

         }

         /*后面*/

         #box div:nth-child(2){

             background: palevioletred;

             transform: translateZ(-100px);

         }

         /*左面*/

         #box div:nth-child(3){

             background: plum;

             transform: translateX(-100px) rotateY(90deg);

         }

         /*右面*/

         #box div:nth-child(4){

             background: peru;

             transform: translateX(100px) rotateY(90deg);

         }

         /*上面*/

         #box div:nth-child(5){

             background: palegoldenrod;

             transform: translateY(-100px) rotateX(90deg);

         }

         /*下面*/

         #box div:nth-child(6){

             background: paleturquoise;

             transform: translateY(100px) rotateX(90deg);

         }

         img{

             width:200px;

             height: 100%;

         }

     </style>

 </head>

 <body>

 <div id="box">

     <div><img src="010.jpg"/></div>

     <div><img src="010.jpg"/> </div>

     <div><img src="010.jpg"/> </div>

     <div><img src="010.jpg"/> </div>

     <div><img src="010.jpg"/> </div>

     <div><img src="010.jpg"/> </div>

 </div>

 <script type="text/javascript">

     // 获取元素

     var oDiv = document.querySelector('#box');

     var x = 30;

     var y = -60;

     oDiv.onmousedown = function(ev){

         var event = window.event || ev;

         var disY = event.clientX - y;

         var disX = event.clientY - x;

         document.onmousemove = function(ev){

             var event = window.event || ev;

             // 计算偏移角度

             x = event.clientY - disX;

             y = event.clientX - disY;

             oDiv.style.transform = 'perspective(800px) rotateY('+y+'deg) rotateX('+x+'deg)'

         }

         document.onmouseup = function(){

             document.onmousemove = null;

         }

         return false;

     }

 </script>

 </body>

 </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. 原生js 实现旋转木马

    <!DOCTYPE html> <html> <head lang="en"> <meta charset="UTF-8&quo ...

  2. 【http协议】浅谈

    [http协议]浅谈 一. 概述 http,超文本传输协议(HyperText Transfer Protocol)是互联网上应用最为广泛的一种网络协议. 请求与响应: 客户端发送请求,服务器端响应数 ...

  3. ubuntu下Android反编译详细教程-apktool，dex2jar，jd-gui的使用

    转载请注明出处:http://blog.csdn.net/fightlei/article/details/52432161 最近在学习Android反编译的一些知识,虽然在网上搜到了很多相关的文章, ...

  4. rest-assured之如何指定请求数据(Specifying Request Data 包括请求参数、请求头、cookie等)

    我们除了可以为一个请求指定请求参数之外,还可以指定请求头(header).cookies.请求体(body)以及请求内容类型(content-type)等,下面我们就来一一介绍一下: 一.请求HTTP ...

  5. 动态树Link-cut tree(LCT)总结

    动态树是个好玩的东西 LCT题集 预备知识 Splay 树链剖分(好像关系并不大) 动态树(Link-cut tree) 先搬dalao博客 什么是LCT? 动态树是一类要求维护森林的连通性的题的总称 ...

  6. Sum(欧拉降幂+快速幂)

    Input 2 Output 2 Hint 1. For N = 2, S(1) = S(2) = 1. 2. The input file consists of multiple test cas ...

  7. 02-线性结构4 Pop Sequence （25 分)

    Given a stack which can keep M numbers at most. Push N numbers in the order of 1, 2, 3, ..., N and p ...

  8. [转] ScalaTest测试框架

    [From] https://blog.csdn.net/hany3000/article/details/51033610 ScalaTest测试框架 2016年04月01日 02:49:35 阅读 ...

  9. odoo 开发 context 上下文的用法

    context   这是一个上下文,运用很灵活  得到整个context   self.context_get() self.env['res.users'].context_get() 得到cont ...

  10. datatables传参

    前段时间需要修改一个项目.是拿datatables渲染的.然后需要做一个筛选.找各种文档想各种方法很麻烦.最后硬是用原生方式撸下来了. 首先他原来页面 可以看到是通过ajax方式请求了数据.那么其实筛 ...