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

今天咱们来说一下,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. 使用记忆化优化你的 R 代码

    目录 使用记忆化优化你的 R 代码 R 中的性能优化 R 何时变慢 R 何时变(更)快 R 中的记忆化 何时使用记忆化 使用记忆化优化你的 R 代码 本文翻译自<Optimize your R ...

  2. JavaWeb学习笔记（十七）—— 数据库连接池

    一.数据库连接池概述 1.1 为什么使用数据库连接池 如果用户每次请求都向数据库获得连接,而数据库创建连接通常需要消耗相对较大的资源,创建时间也较长.假设网站一天10万访问量,数据库服务器就需要创建1 ...

  3. MIUI7系统如何刷入开发版启用root超级权限

    小米的手机或平板不同手机型号通常情况MIUI官方论坛都提供两个不同系统,大概可分为稳定版和开发版,稳定版没有提供root权限管理,开发版中就开启了root权限,很多情况我们需要使用的一些功能强大的AP ...

  4. 【车联网系统】基于Python实现的现网全自动化测试方案

    前面写了几篇基于CANoe实现的仿真测试台架,属于半自动化测试方案.现出一个Python实现的车联网系统全自动化测试方案. 目录结构 1.-----------------------车联网系统组成 ...

  5. php的魔术常量以及类的模式方法

    魔术方法class A { const PI = 3.14; static $type = 'type1'; public $a1='a1'; public function fun1(){ var_ ...

  6. 其它浏览器上是可以正常请求的,ie浏览器上确出现奇怪的http请求400错误

    做项目的时候,遇到一个小的问题.一个location.href="请求的url"在其它浏览器上是可以正常请求的.但是在ie浏览器上确出现奇怪的http请求400错误,我们先来对于h ...

  7. mysql 03

    CREATE TABLE class(    empno INT,    ename VARCHAR(4),    job VARCHAR(4),    mgr INT,    hiredate DA ...

  8. Java中的值传递和地址传递（传值、传引用）

    首先,不要纠结于 Pass By Value 和 Pass By Reference 的字面上的意义,否则很容易陷入所谓的“一切传引用其实本质上是传值”这种并不能解决问题无意义论战中.更何况,要想知道 ...

  9. 如何在react&webpack中引入图片？

    在react&webpack项目中需要引入图片,但是webpack使用的模块化的思想,如果不进行任何配置,而直接在jsx或者是css中使用相对路径来使用就会出现问题,在webpack中提供了u ...

  10. C# 反射(Reflection)技术

    本文参考自C#反射(Reflection)详解,纯属学习笔记,加深记忆 在介绍反射前,先介绍一个重要的知识点         .Net应用程序是由程序集(Assembly).模块(Module).类型 ...