<!doctype html>
<html>
<head>
<meta charset="UTF-8">
<title>Document</title>
<style>
html, body, div, span,
h1, h2, h3, h4, h5, h6, p
a, img, ol, ul, li
{
margin:0;padding:0;border:0;outline:0;
}
body {
margin-top: 5em;
text-align: center;
color: #414142;
background: rgb(246, 241, 232);
background-image: -webkit-radial-gradient(farthest-side ellipse at center, rgba(246, 241, 232, .85) 39%, rgba(212, 204, 186, .5) 100%),
url("../img/1.jpg");
background-image: -moz-radial-gradient(farthest-side ellipse at center, rgba(246, 241, 232, .85) 39%, rgba(212, 204, 186, .5) 100%),
url("../img/1.jpg");
background-image: -ms-radial-gradient(farthest-side ellipse at center, rgba(246, 241, 232, .85) 39%, rgba(212, 204, 186, .5) 100%),
url("../img/1.jpg");
background-image: -o-radial-gradient(farthest-side ellipse at center, rgba(246, 241, 232, .85) 39%, rgba(212, 204, 186, .5) 100%),
url("../img/1.jpg");
background-image: radial-gradient(farthest-side ellipse at center, rgba(246, 241, 232, .85) 39%, rgba(212, 204, 186, .5) 100%),
url("../img/1.jpg");
background-size: cover;
}

h1, em {
display: block;
font-size: 25px;
font-weight: normal;
margin: 2em auto;
}

.button {
display: inline-block;
font-size: 20px;
width: 100px;
height: 60px;
margin: 5px 50px;
padding: 15px;
border-radius: 6px;
position: relative;
}

#container {
margin: 0 auto;
width: 100%;
}

.wrapper {
display: block;
width: 300px;
height: 300px;
vertical-align: top;
margin: 45px auto;
cursor: pointer;
position: relative;
font-family: Tahoma, Arial;
-webkit-perspective: 4000px;
-moz-perspective: 4000px;
-ms-perspective: 4000px;
-o-perspective: 4000px;
perspective: 4000px;
}

.item {
width: 300px;
height: 300px;
-webkit-transform-style: preserve-3d;
-moz-transform-style: preserve-3d;
-ms-transform-style: preserve-3d;
-o-transform-style: preserve-3d;
transform-style: preserve-3d;
margin: 40px;
-webkit-transition: -webkit-transform .6s;
-moz-transition: -moz-transform .6s;
-ms-transition: -ms-transform .6s;
-o-transition: -o-transform .6s;
transition: transform .6s;
}

.item img {
display: block;
position: absolute;
border-radius: 15px;
box-shadow: 0px 3px 8px rgba(0, 0, 0, 0.3);
-webkit-transition: all .6s;
-moz-transition: all .6s;
-ms-transition: all .6s;
-o-transition: all .6s;
transition: all .6s;
width: 300px;
height: 300px;
}

.item .front {
-webkit-transform: translateZ(150px);
-moz-transform: translateZ(150px);
-ms-transform: translateZ(150px);
-o-transform: translateZ(150px);
transform: translateZ(150px);
}

.item .behind {
-webkit-transform: translateZ(-150px);
-moz-transform: translateZ(-150px);
-ms-transform: translateZ(-150px);
-o-transform: translateZ(-150px);
transform: translateZ(-150px);
}

.item .top {
-webkit-transform: rotateX(90deg) translateZ(-150px);
-moz-transform: rotateX(90deg) translateZ(-150px);
-ms-transform: rotateX(90deg) translateZ(-150px);
-o-transform: rotateX(90deg) translateZ(-150px);
transform: rotateX(90deg) translateZ(-150px);
}

.item .bottom {
-webkit-transform: rotateX(90deg) translateZ(150px);
-moz-transform: rotateX(90deg) translateZ(150px);
-ms-transform: rotateX(90deg) translateZ(150px);
-o-transform: rotateX(90deg) translateZ(150px);
transform: rotateX(90deg) translateZ(150px);
}

.item .left {
-webkit-transform: rotateY(90deg) translateZ(-150px);
-moz-transform: rotateY(90deg) translateZ(-150px);
-ms-transform: rotateY(90deg) translateZ(-150px);
-o-transform: rotateY(90deg) translateZ(-150px);
transform: rotateY(90deg) translateZ(-150px);
}

.item .right {
-webkit-transform: rotateY(90deg) translateZ(150px);
-moz-transform: rotateY(90deg) translateZ(150px);
-ms-transform: rotateY(90deg) translateZ(150px);
-o-transform: rotateY(90deg) translateZ(150px);
transform: rotateY(90deg) translateZ(150px);
}
</style>
</head>
<body>
<div id="container">
<h1>CSS3 3D BOX</h1>

<div class="wrapper">
<div id="item" class="item">

<img id="behind" class="behind" src="../img/1.jpg"/>
<img id="top" class="top" src="../img/1.jpg"/>
<img id="bottom" class="bottom" src="../img/1.jpg"/>
<img id="left" class="left" src="../img/1.jpg"/>
<img id="right" class="right" src="../img/1.jpg"/>
</div>

</div>
<input type="button" class="button" value="up" onclick="change(this)"/>
<input type="button" class="button" value="down" onclick="change(this)"/>
<input type="button" class="button" value="left" onclick="change(this)"/>
<input type="button" class="button" value="right" onclick="change(this)"/>
</div>
<script type="text/javascript">
function $(id){
return document.getElementById(id);
}
var btn;
var item = $("item");
var up_down_deg = 0;
var left_right_deg = 0;
function change(btn) {
switch (btn.value) {
case "up":
up_down_deg = up_down_deg + 90;
item.style.webkitTransform = "rotateX("+up_down_deg+"deg)";
break;
case "down":
up_down_deg = up_down_deg - 90;
item.style.webkitTransform = "rotateX("+up_down_deg+"deg)";
break;
case "left":
left_right_deg = left_right_deg - 90;
item.style.webkitTransform = "rotateY("+left_right_deg+"deg)";
break;
case "right":
left_right_deg = left_right_deg + 90;
item.style.webkitTransform = "rotateY("+left_right_deg+"deg)";
break;
}
}
</script>
</body>
</html>

一个简单的CSS3+js 实现3D BOX的更多相关文章

  1. 实现一个简单的Unity3D三皮卡——3D Picking (1)

    3D Picking 其原理是从摄像机位置到空间发射的射线.基于光线碰到物体回暖. 这里我们使用了触摸屏拿起触摸,鼠标选择相同的原理,仅仅是可选API不同. 从unity3D官网Manual里找到下面 ...

  2. 一个简单用原生js实现的小游戏----FlappyBird

    这是一个特别简单的用原生js实现的一个小鸟游戏,比较简单,适合新手练习 这是html结构 <!DOCTYPE html><html lang="en">&l ...

  3. 搭建一个简单的node.js服务器

    第一步:安装node.js.可以去官网:https://nodejs.org/en/进行下载. 查看是否成功,只需在控制台输入 node -v.出现版本号的话,就证明成功了. 第二步:编写node.j ...

  4. 从0构建webpack开发环境(一) 一个简单webpack.config.js

    本文基于webpack4.X,使用的包管理工具是yarn 概念相关就不搬运了,直接开始 首先项目初始化 mkdir webpack-demo && cd webpack-demo ya ...

  5. 一个简单的 vue.js 实践教程

    https://segmentfault.com/a/1190000006776243?utm_source=tuicool&utm_medium=referral 感觉需要改善的地方有: ( ...

  6. javascript常用开发笔记：一个简单强大的js日期格式化方法

    前言:一直没找到好用的javascript日期格式化工具,自己写了一个,方便以后复用 1.主要功能 (1)支持任意顺序的日期格式排列:yyyy=年,MM=月,dd=日,HH=时,mm=分,ss=秒,s ...

  7. 封装一个简单的原生js焦点轮播图插件

    轮播图实现的效果为,鼠标移入左右箭头会出现,可以点击切换图片,下面的小圆点会跟随,可以循环播放(为了方便理解,没有补2张图做无缝轮播).本篇文章的主要目的是分享封装插件的思路. 轮播图我一开始是写成非 ...

  8. 一个简单的knockout.js 和easyui的绑定

    <!DOCTYPE html><html><head><meta charset="UTF-8"><title>Basi ...

  9. 一个简单的Vue.js组件开发示例

    //创建属于自己的vue组件库 (function(Vue, undefined) { Vue.component("my-component", { template: '< ...

随机推荐

  1. Struts2框架深入详解版

    一.认识Struts2 1. 什么是Web框架? 1.1  模型1 1.2  模型2 和MVC 1.3   Web框架的诞生 2. Struts1 到Struts2 2.1 其他 Web框架 2.2 ...

  2. 保持Qt GUI响应的几种方法

    最开始使用Qt时就遇到过QT Gui失去响应的问题,我是用多线程的方式解决的,然而通常来说,多线程是会降低程序的运行速度. 之后,在使用QSqlQuery::execBatch()函数时,Qt Gui ...

  3. js操作table表格导出数据到excel方法

    js导出excel资料很少,网上也找了很多,基本都不能用,要么只能是IE用,还必须要权限,这是非常不好的.后来到github上找到table2excel.js,虽然可以用,但仍然对IE支持不够,也算不 ...

  4. 如何围绕企业战略，建设BI驾驶舱？

    随着企业的逐步发展,人员的增加.业态的复杂不仅对管理也对信息化的要求越来越高,甚至需要从战略角度出发,进行从上至下的全面推行. 关于这个话题,某公司深有体会.面对这样的瓶颈,一方面从优化信息架构.调整 ...

  5. Hibernate 系列 01 - 框架技术 （介绍Hibernate框架的发展由来）

    引导目录: Hibernate 系列教程 目录 本篇导航: 为什么学习框架技术 框架的概念 主流框架的介绍 1.为什么学习框架技术 如何制作一份看上去具有专业水准的PPT文档呢?一个简单的方法就是使用 ...

  6. 吐槽CodeDom

    用着.NET Framework,发现了CodeDom的先天性缺陷,心里百般难受. 不知道 CodeDom 是什么的请看这里 CodeDom_百度百科 这里有CodeDom非常全的中文教程 CodeD ...

  7. Scala访问修饰符（四）

    Scala 访问修饰符基本和Java的一样,分别有:private,protected,public. 如果没有指定访问修饰符符,默认情况下,Scala对象的访问级别都是 public. Scala ...

  8. Android使用最小宽度限定符时最小宽度的计算

    Android开发中最头疼的问题之一就是兼容不同尺寸和分辨率的设备.这里推荐一篇总结的比较完整的<Android开发:最全面.最易懂的Android屏幕适配解决方案>.这篇文章对屏幕兼容的 ...

  9. Morris post order traversal algorithm

    Sept. 5, 2015 花时间把代码读明白, 比光看书强. 动手写代码, 改代码,  兴趣是最好的老师. 多记几个例子, 增加情趣. 举个例子关于中序遍历,            4       ...

  10. ZBrush中的头部模型该如何进行雕刻

    使用ZBrush®能够快速雕刻人物头部模型,教程只是大概介雕刻前的准备工作和一些软件基础,真正的雕刻还需要学习者具备一定的功底,本文向大家展示头部模型制作流程解析,初学者可以以它做参考拓展自己思路. ...