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

今天咱们来说一下,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. flask实战-个人博客-使用类组织配置

    使用类组织配置 在实际需求中,我们往往需要不同的配置组合.例如,开发用的配置,测试用的配置,生产环境用的配置.为了能方便地在这些配置中切换,你可以把配置文件升级为包,然后为这些使用场景分别创建不同的配 ...

  2. 基础篇：3.3）规范化：3d装配图

    本章目的:规范化3d零件装配图,弄清楚装配层级划分,这也是机械的基本功夫. 1.装配通用原则 在装配建模设计中,应遵循以下通用原则:a)所有的装配单元应具有唯一性和稳定性,不允许冗余元素存在: //就 ...

  3. es6 简单封装一个 省市县三级下拉框

    废话不多说,直接上效果图和代码: 1,index.js function $(el){ return document.getElementById(el) } let render = Symbol ...

  4. MM 后台配置（转）

    本文转自:https://www.cnblogs.com/yanglikun/p/4124797.html 一.全局配置 1.一般配置 SPRO->SAP NETWEAVER -> GEN ...

  5. Android的崩溃类型总结

    看了篇腾讯的沙龙分享,觉得很不错,在这里分享给大家 crash的大致划分:

  6. redis中算法之——MurmurHash2算法

    MurmurHash算法由Austin Appleby发明于2008年,是一种非加密hash算法,适用于基于hash查找的场景.murmurhash最新版本是MurMurHash3,支持32位,64位 ...

  7. opencv-python 读入带有中文的图片路径

    windows 下读入带有中文的图片路径使用cv2.imread() 不能读入.使用如下代码可以. def cv_imread(filePath): cv_img = cv2.imdecode(np. ...

  8. flow类型检查

    https://blog.csdn.net/tangxiujiang/article/details/80778627 Flow的简单介绍 2018年06月22日 21:54:25 tangxiuji ...

  9. Vim改装成一个IDE编程环境

      1 写在前面   Linux下编程一直被诟病的一点是: 没有一个好用的IDE, 但是听说Linux牛人, 黑客之类的也都不用IDE. 但是对我等从Windows平台转移过来的Coder来说, 一个 ...

  10. git忽略ssl认证

    问题 在是用git克隆仓库的时候,报错如下: fatal: unable to access ‘https://github.com/........../‘: OpenSSL SSL_connect ...