一个简单的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: '< ...
随机推荐
- 单台机器配置redis多实例
1.增加/usr/local/redis/etc中拷贝一份配置文件重新命名为redis6483.conf 2.编辑redis6483.conf daemonize yes //以后台进程启动 pid ...
- window环境下将solr6.3部署到tomcat中
1.我下载的solr是6.3版本的,需要jdk1.8及以上,tomcat8 JDK1.8的下载地址:http://www.Oracle.com/technetwork/Java/javase/down ...
- java反射复制属性值
/** 将sourceObj的属性拷贝到targetObj * @param sourceObj * @param targetObj * @param clazz 从哪一个类开始(比如sourceO ...
- DS 工作室
如果你想租用我,QQ:26959368 价格可以详细谈哦, 1. 企业信息化过程中问题的免费咨询: 2. Office 365.Sharepoint Online .Azure 云的咨询服务. 3. ...
- 利用NSCalendar类实现日期的比较
在项目中日期的显示经常会当天的显示时分,当月的显示日时和分,以此类推,难免会涉及到日期的比较,下面介绍一下日期比较的两种方法 比较日期有两种方法 一种是通过系统的NSCalendar类实现 NSStr ...
- [转]ASP.NET应用程序生命周期趣谈(二)
在上回书开始的时候我们提到博客园的IIS看了一眼我的请求后就直接交给ASP.NET去处理了,并且要求ASP.NET处理完之后返回HTML以供展示. 那么我们不仅要问: 1, IIS肯定是没有眼睛 ...
- Windows Server 2003安装方法
1. 设置BIOS,从光驱引导启动.光盘放入光驱,自动读盘,选择第一项“安装Windows Server 2003,Enterprise Bdition”: 2. 弹出加载安装文件界面. 3. 出现安 ...
- IIS中启用ASP并连接Access数据库的解决办法
1. IIS安装ASP模块 进入控制面板 ---- 打开或关闭Windows功能 选择如下所示两项,点击安装完成 2. 打开父路径许可 选择相应应用程序池 ----- 高级设置 ---- 将“启用父路 ...
- ORACLE lag()与lead() 函数
一.简介 lag与lead函数是跟偏移量相关的两个分析函数,通过这两个函数可以在一次查询中取出同一字段的前N行的数据(lag)和后N行的数据(lead)作为独立的列,从而更方便地进行进行数据过滤.这种 ...
- zabbix 3.0.3 (nginx)安装过程中的问题排错记录
特殊注明:安装zabbix 2.4.8和2.4.6遇到2个问题,如下:找了很多解决办法,实在无解,只能换版本,尝试换(2.2.2正常 | 3.0.3正常)都正常,最后决定换3.0.3 1.Error ...