<!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. 包含修改字体，图片上传等功能的文本输入框-Bootstrap

    通过jQuery Bootstrap小插件,框任何一个div转换变成一个富文本编辑框,主要特色: 在Mac和window平台下自动针对常用操作绑定热键 可以拖拽插入图片,支持图片上传(也可以获取移动设 ...

  2. TypeScript之面向对象初体验

    1.安装nodejs和vscode: nodejs : https://nodejs.org/en/ Visual Studio Code :  https://www.visualstudio.co ...

  3. 【挖财工作笔记】idea使用指南

    一 安装破解 破解选择服务器,然后选择地址:http://www.iteblog.com/idea/key.php  http://idea.iteblog.com/key.php  http://i ...

  4. 9.1.2 asp.net core 自动生成组合查询

    在做系统的时候,经常遇到前台录入一大堆的查询条件,然后点击查询提交后台,在Controller里面生成对应的查询SQL或者表达式,数据库执行再将结果返回客户端. 例如如下页面,输入三个条件,日志类型. ...

  5. AlloyTouch全屏滚动插件发布--30秒搞定顺滑H5页

    原文链接:https://github.com/AlloyTeam/AlloyTouch/wiki/AlloyTouch-FullPage-Plugin 先验货 插件代码可以在这里找到. 注意,虽然是 ...

  6. ngrok

    为什么要使用ngrok?/ngrok 作为一个Web开发者,我们有时候会需要临时地将一个本地的Web网站部署到外网,以供它人体验评价或协助调试等等,通常我们会这么做: 找到一台运行于外网的Web服务器 ...

  7. React Native JSX value should be expression or a quoted JSX text.

    问题描述:  我在使用props时候, 我的写法是这样的 ... <View> <Person name='john' age=32 gender=true></Pers ...

  8. swift-元组

    元组: 将多个相同或者不同类型的值用一个小括号括起来就是一个元组.元组和结构体很像,实际上元组是复合类型.小括号内可以写任意类型,如果不定义类型,可以根据数据自动判断推算出类型 省略了类型 let p ...

  9. yii2实战教程之新手入门指南-简单博客管理系统

    作者:白狼 出处:http://www.manks.top/document/easy_blog_manage_system.html 本文版权归作者,欢迎转载,但未经作者同意必须保留此段声明,且在文 ...

  10. Elixir - Hey, two great tastes that go great together!

    这是Elixir的作者 José Valim 参与的一次技术访谈,很有料,我们可以了解Elixir的一些设计初衷,目标等等. 原文在: http://rubyrogues.com/114-rr-eli ...