一个简单的CSS3+js 实现3D BOX
<!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的更多相关文章
- 实现一个简单的Unity3D三皮卡——3D Picking (1)
3D Picking 其原理是从摄像机位置到空间发射的射线.基于光线碰到物体回暖. 这里我们使用了触摸屏拿起触摸,鼠标选择相同的原理,仅仅是可选API不同. 从unity3D官网Manual里找到下面 ...
- 一个简单用原生js实现的小游戏----FlappyBird
这是一个特别简单的用原生js实现的一个小鸟游戏,比较简单,适合新手练习 这是html结构 <!DOCTYPE html><html lang="en">&l ...
- 搭建一个简单的node.js服务器
第一步:安装node.js.可以去官网:https://nodejs.org/en/进行下载. 查看是否成功,只需在控制台输入 node -v.出现版本号的话,就证明成功了. 第二步:编写node.j ...
- 从0构建webpack开发环境(一) 一个简单webpack.config.js
本文基于webpack4.X,使用的包管理工具是yarn 概念相关就不搬运了,直接开始 首先项目初始化 mkdir webpack-demo && cd webpack-demo ya ...
- 一个简单的 vue.js 实践教程
https://segmentfault.com/a/1190000006776243?utm_source=tuicool&utm_medium=referral 感觉需要改善的地方有: ( ...
- javascript常用开发笔记：一个简单强大的js日期格式化方法
前言:一直没找到好用的javascript日期格式化工具,自己写了一个,方便以后复用 1.主要功能 (1)支持任意顺序的日期格式排列:yyyy=年,MM=月,dd=日,HH=时,mm=分,ss=秒,s ...
- 封装一个简单的原生js焦点轮播图插件
轮播图实现的效果为,鼠标移入左右箭头会出现,可以点击切换图片,下面的小圆点会跟随,可以循环播放(为了方便理解,没有补2张图做无缝轮播).本篇文章的主要目的是分享封装插件的思路. 轮播图我一开始是写成非 ...
- 一个简单的knockout.js 和easyui的绑定
<!DOCTYPE html><html><head><meta charset="UTF-8"><title>Basi ...
- 一个简单的Vue.js组件开发示例
//创建属于自己的vue组件库 (function(Vue, undefined) { Vue.component("my-component", { template: '< ...
随机推荐
- Servlet3.0的异步
servlet之前的操作同时同步的,就是按照这样的一个流程来走的: 1.请求根据一个路径路由到一个servlet中, 2.servlet获取一系列的参数 3.执行一系列的逻辑(花费时间所占的比重也更大 ...
- perl 如何匹配ASCII码以及ASCII码转换
匹配ASCII码: /[:ascii:]/ ASCII码转换为数字: ord() 数字转换为ASCII码: chr()
- string.empty , "" , null 以及性能的比较
一:这种结论,个人觉得仍然存疑 http://www.cnblogs.com/wangshuai901/archive/2012/05/06/2485657.html 1.null null 关 ...
- 前端之HTML知识点整理
一.html概述 htyper text markup language 即超文本标记语言 超文本: 就是指页面内可以包含图片.链接,甚至音乐.程序等非文字元素. 标记语言: 标记(标签)构成的语言 ...
- heartbeat在yum系发行版本的处理资料
centos 安装包[rpm]和光盘iso文件 http://mirror.centos.org/centos/ 对应如上包的代码 http://vault.centos.org/ git.cento ...
- Angular版本1.2.4在IE11的IE8模式下出错解决方案
今天,群里一个兄弟抛出一个问题(如上),截图说明. 打断点调试下,貌似是console里面的log方法出错了,如下: 这个是console的log方法,为什么错呢,继续: 我们会发现,在这里是检测fu ...
- PHPmailer关于Extension missing: openssl报错的解决
最近在写一个网页的时候,需要用到PHPmailer来发送邮件,按照官网上给出的demo写出一个例子,却报错Extension missing: openssl 最后发现需要修改php.ini中的配置: ...
- C#用链式方法表达循环嵌套
情节故事得有情节,不喜欢情节的朋友可看第1版代码,然后直接跳至“三.想要链式写法” 一.起缘 故事缘于一位朋友的一道题: 朋友四人玩LOL游戏.第一局,分别选择位置:中单,上单,ADC,辅助:第二局新 ...
- 在output 子句和 scope_identity() 混合使用的时候的注意事项
无意睹到一篇旧文档 SR0008:考虑使用 SCOPE_IDENTITY 代替 @@IDENTITY :https://msdn.microsoft.com/zh-cn/library/dd17212 ...
- 不同数据库，查询前n条数据的SQL语句
不同的数据库,支持的SQL语法略有不同,以下是不同数据库查询前n条数据的SQl语句 SQL Server(MSSQL) SELECT TOP n * FROM table_name ORACLE SE ...