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

今天咱们来说一下,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. C++ 创建类时常考虑的问题

    目录 继承 抽象接口 标准设计模式 初始化与析构模型 定义复制构造函数和赋值操作 模板 操作符 类型转换操作符 友元 非功能性约束 本文仅以c++为例,简要说明创建一个类时我们需要考虑的问题.创建一个 ...

  2. python 面向过程和面向对象比较

    面向过程 VS 面向对象 面向过程的程序设计:核心是过程二字,过程指的是解决问题的步骤,即先干什么再干什么......面向过程的设计就好比精心设计好一条流水线,是一种机械式的思维方式. 优点是:复杂度 ...

  3. genkins的报错排查

    [ERROR] /root/.jenkins/workspace/car/src/main/java/com/zhengxin/tool/code/Code.java:[20,64] diamond ...

  4. python四则运算2.0

    github项目地址: https://github.com/kongkalong/python PSP 预估耗时(分钟) Planning .Estimate 48*60 Development . ...

  5. js中自执行函数写法

    //自执行写法1 (function T(){ alert(1) })() //自执行写法2 var T1=function(){ alert(1) }(); //传值 var para1={a:1; ...

  6. rabbitmq 消息确认

    消息确认主要用在接收方 如果接收方没有确认, broker可以重发,确保消息至少消息一次..

  7. 反弹shell集锦

    1.   关于反弹shell 就是控制端监听在某TCP/UDP端口,被控端发起请求到该端口,并将其命令行的输入输出转到控制端.reverse shell与telnet,ssh等标准shell对应,本质 ...

  8. python学习15-序列化（转载）

    序列化是指把内存里的数据类型转换成字符串,以使其能存储到硬盘或通过网络传输到远程,因为硬盘和网络传输时只能接受bytes 一.pickle 把python对象写入到文件中的一种解决方案,但是写入到文件 ...

  9. Spring boot 项目部署服务器

    Spring Boot 有两种部署到服务器的方式,这里介绍官方推荐的(jar包) 一.首先进行application.properties配置 # EMBEDDED SERVER CONFIGURAT ...

  10. eclipse中修改tomcat的配置，解决全局性的get提交乱码问题

    在项目中如果页面提交方式为get的时候,中文会出现乱码. 为了解决乱码问题我们有两种办法. 第一种:在程序中加入get提交乱码的解决 String username = new String(user ...