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

今天咱们来说一下,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. 如何分析python的性能(linux)

    一.多进程: 查看程序所有进程与线程 如果python程序启动后形成多个进程如何判断其关系 显示进程的树状结构.-cp 表示树展开,且显示进程号码 $pstree -cp 显示结果 │ │ │ ├─p ...

  2. jenkins配置以cygwin环境的子节点

    1.为Cygwin配置上sshd服务 ⑴.双击点击如下安装文件,并一直选取下一步 ⑵.到这个步骤停止,并且在search栏里输入openssh,并下载搜出的两个程序 ⑶.下载好以后以管理员权限打开cy ...

  3. bzoj3280: 小R的烦恼（最小费用最大流）

    Description 小R最近遇上了大麻烦,他的程序设计挂科了.于是他只好找程设老师求情.善良的程设老师答应不挂他,但是要 求小R帮助他一起解决一个难题.问题是这样的,程设老师最近要进行一项邪恶的实 ...

  4. MySql安装错误代码1045的解决方案

    1.MySql安装错误代码1045的解决方案 2.root密码忘记1045的解决方案 错误代码 1045 Access denied for user 'root'@'localhost' (usin ...

  5. node爬取页面元素

    /** * Created by on 2018/12/25. */const http = require("https");const fs = require('fs'); ...

  6. Flutter Dialog 屏蔽返回键

    使用 WillPopScope + Future.value(false); 屏蔽返回键.代码如下: showDialog<Null>( context: context, // Buil ...

  7. C 和 C++ 字符串函数操作

    1)字符串操作  strcpy(p, p1) 复制字符串 strncpy(p, p1, n) 复制指定长度字符串 strcat(p, p1) 附加字符串 strncat(p, p1, n) 附加指定长 ...

  8. Windows操作系统的发展简介

    一.简介    Microsoft Windows,是美国微软公司研发的一套操作系统,它问世于1985年,起初仅仅是Microsoft-DOS模拟环境,后续的系统版本由于微软不断的更新升级,不但易用, ...

  9. 文献综述十八：基于SSH框架的进销存管理系统设计与实现

    一.基本信息 标题:基于SSH框架的进销存管理系统设计与实现 时间:2017 出版源:内蒙古科技与经济 文件分类:对框架的研究 二.研究背景 进销存管理系统在各企业中广泛应用,使用SSH框架,很大程度 ...

  10. win10操作系统系统，小米路由器，小米3 的问题

    注意 , 置顶 单独一篇 : { win10  局域网共享 小米路由器,操作盘太卡 } 开发中用专业版 , 别用家庭版 比如有远程桌面程序 和 HV 虚拟机 查看激活信息 和 是不是永久激活 参考 h ...