[原][CSS3]会动的盒子机器人
[PC与移动端皆可]会动的盒子机器人
浏览器必须可以解析perspective属性。
在线：http://wangxinsheng.herokuapp.com/boxMan
代码：
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>[WXS]盒子机器人</title>
<meta name="author" content="WangXinsheng">
<meta name="apple-mobile-web-app-capable" content="yes">
<meta name="apple-mobile-web-app-status-bar-style" content="black">
<meta name="viewport" id="viewport" content="width = device-width, initial-scale = 1, minimum-scale = 1, maximum-scale = 1, user-scalable=no">
<meta http-equiv="X-UA-Compatible" content="chrome=1">
</head>
<style>
* {
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
} body {
height: 10em;
left: 50%;
margin-left: -5em;
margin-top: -5em;
/*perspective:设置元素被查看位置的视图*/
-webkit-perspective: 1000px;
-ms-perspective: 1000px;
perspective: 1000px;
/*perspective-origin/-webkit-perspective-origin:设置 3D 元素的基点位置*/
position: absolute;
top: 50%;
width: 10em;
}
cube{
position: absolute;
-webkit-transform-style: preserve-3d;
-ms-transform-style: preserve-3d;
transform-style: preserve-3d;
-webkit-transform: translateZ(-5em) rotateX(-20deg) rotateY(45deg);
transform: translateZ(-5em) rotateX(-20deg) rotateY(45deg);
} cube * {
background-image: -webkit-radial-gradient(rgba(202,184,160,1),rgba(183,154,112,1));
border: 2px solid rgba(183,154,112,1);
position: absolute;
display: block;
} cube.header {
height: 8em;
width: 13em;
background:none;
border:none;
-webkit-transform: translateZ(0em) rotateX(0deg) rotateY(0deg);
transform: translateZ(0em) rotateX(0deg) rotateY(0deg);
}
cube.header back {
height: 8em;
width: 13em;
-webkit-transform: rotateX(180deg) translateZ(4em);
-ms-transform: rotateX(180deg) translateZ(4em);
transform: rotateX(180deg) translateZ(4em);
} cube.header bottom {
height: 8em;
width: 13em;
-webkit-transform: rotateX(-90deg) translateZ(4em);
-ms-transform: rotateX(-90deg) translateZ(4em);
transform: rotateX(-90deg) translateZ(4em);
display:none;
} cube.header front {
height: 8em;
width: 13em;
-webkit-transform: rotateY(0deg) translateZ(4em);
-ms-transform: rotateY(0deg) translateZ(4em);
transform: rotateY(0deg) translateZ(4em);
background:url('img/headerFront.png') no-repeat rgb(202,184,160);
-moz-background-size:cover;
-webkit-background-size:cover;
-o-background-size:cover;
background-size:cover;
} cube.header left {
height: 8em;
width: 8em;
-webkit-transform: rotateY(-90deg) translateZ(4em);
-ms-transform: rotateY(-90deg) translateZ(4em);
transform: rotateY(-90deg) translateZ(4em);
} cube.header right {
height: 8em;
width: 8em;
-webkit-transform: rotateY(90deg) translateZ(9em);
-ms-transform: rotateY(90deg) translateZ(9em);
transform: rotateY(90deg) translateZ(9em);
} cube.header top {
height: 8em;
width: 13em;
-webkit-transform: rotateX(90deg) translateZ(4em);
-ms-transform:rotateX(90deg) translateZ(4em);
transform: rotateX(90deg) translateZ(4em);
}
/*------------------------------*/
cube.body.body {
height: 10em;
width: 6em;
background:none;
border:none;
-webkit-transform: translateZ(0em) rotateX(0deg) rotateY(0deg);
transform: translateZ(0em) rotateX(0deg) rotateY(0deg);
}
cube.body.body back {
height: 10em;
width: 6em;
-webkit-transform: rotateX(180deg) translateZ(3em);
-ms-transform: rotateX(180deg) translateZ(3em);
transform: rotateX(180deg) translateZ(3em);
} cube.body.body bottom {
height: 6em;
width: 6em;
-webkit-transform: rotateX(-90deg) translateZ(7em);
-ms-transform: rotateX(-90deg) translateZ(7em);
transform: rotateX(-90deg) translateZ(7em);
} cube.body.body front {
height: 10em;
width: 6em;
-webkit-transform: rotateY(0deg) translateZ(3em);
-ms-transform: rotateY(0deg) translateZ(3em);
transform: rotateY(0deg) translateZ(3em);
background-color:rgb(202,184,160,1);
background:url('img/bodyFront.png') no-repeat rgb(202,184,160);;
-moz-background-size:cover;
-webkit-background-size:cover;
-o-background-size:cover;
background-size:cover;
} cube.body.body left {
height: 10em;
width: 6em;
-webkit-transform: rotateY(-90deg) translateZ(3em);
-ms-transform: rotateY(-90deg) translateZ(3em);
transform: rotateY(-90deg) translateZ(3em);
} cube.body.body right {
height: 10em;
width: 6em;
-webkit-transform: rotateY(90deg) translateZ(3em);
-ms-transform: rotateY(90deg) translateZ(3em);
transform: rotateY(90deg) translateZ(3em);
} cube.body.body top {
height: 6em;
width: 6em;
-webkit-transform: rotateX(90deg) translateZ(3em);
-ms-transform: rotateX(90deg) translateZ(3em);
transform: rotateX(90deg) translateZ(3em);
}
/*------------------------------*/
cube.hand {
height: 8em;
width: 3em;
background:none;
border:none;
-webkit-transform: translateZ(0em) rotateX(0deg) rotateY(0deg);
transform: translateZ(0em) rotateX(0deg) rotateY(0deg);
}
cube.hand back {
height: 8em;
width: 3em;
-webkit-transform: rotateX(180deg) translateZ(1.5em) translateY(-3em);
-ms-transform: rotateX(180deg) translateZ(1.5em) translateY(-3em);
transform: rotateX(180deg) translateZ(1.5em) translateY(-3em);
} cube.hand bottom {
height: 3em;
width: 3em;
-webkit-transform: rotateX(-90deg) translateZ(9.5em);
-ms-transform: rotateX(-90deg) translateZ(9.5em);
transform: rotateX(-90deg) translateZ(9.5em);
} cube.hand front {
height: 8em;
width: 3em;
-webkit-transform: rotateY(0deg) translateZ(1.5em) translateY(3em);
-ms-transform: rotateY(0deg) translateZ(1.5em) translateY(3em);
transform: rotateY(0deg) translateZ(1.5em) translateY(3em);
} cube.hand left {
height: 8em;
width: 3em;
-webkit-transform: rotateY(-90deg) translateZ(1.5em) translateY(3em);
-ms-transform: rotateY(-90deg) translateZ(1.5em) translateY(3em);
transform: rotateY(-90deg) translateZ(1.5em) translateY(3em);
} cube.hand right {
height: 8em;
width: 3em;
-webkit-transform: rotateY(90deg) translateZ(1.5em) translateY(3em);
-ms-transform: rotateY(90deg) translateZ(1.5em) translateY(3em);
transform: rotateY(90deg) translateZ(1.5em) translateY(3em);
} cube.hand top {
height: 3em;
width: 3em;
-webkit-transform: rotateX(90deg) translateZ(-1.5em);
-ms-transform: rotateX(90deg) translateZ(-1.5em);
transform: rotateX(90deg) translateZ(-1.5em);
}
/*------------------------------*/
cube.foot {
height: 8em;
width: 2.5em;
background:none;
border:none;
-webkit-transform: translateZ(0em) rotateX(0deg) rotateY(0deg);
transform: translateZ(0em) rotateX(0deg) rotateY(0deg);
}
cube.foot back {
height: 8em;
width: 2.5em;
-webkit-transform: rotateX(180deg) translateZ(2.75em) translateY(-3em);
-ms-transform: rotateX(180deg) translateZ(2.75em) translateY(-3em);
transform: rotateX(180deg) translateZ(2.75em) translateY(-3em);
} cube.foot bottom {
height: 5.5em;
width: 2.5em;
-webkit-transform: rotateX(-90deg) translateZ(8.2em);
-ms-transform: rotateX(-90deg) translateZ(8.2em);
transform: rotateX(-90deg) translateZ(8.2em);
} cube.foot front {
height: 8em;
width: 2.5em;
-webkit-transform: rotateY(0deg) translateZ(2.75em) translateY(3em);
-ms-transform: rotateY(0deg) translateZ(2.75em) translateY(3em);
transform: rotateY(0deg) translateZ(2.75em) translateY(3em);
} cube.foot left {
height: 8em;
width: 5.5em;
-webkit-transform: rotateY(-90deg) translateZ(2.7em) translateY(3em);
-ms-transform: rotateY(-90deg) translateZ(2.7em) translateY(3em);
transform: rotateY(-90deg) translateZ(2.7em) translateY(3em);
} cube.foot right {
height: 8em;
width: 5.5em;
-webkit-transform: rotateY(90deg) translateZ(-0.25em) translateY(3em);
-ms-transform: rotateY(90deg) translateZ(-0.25em) translateY(3em);
transform: rotateY(90deg) translateZ(-0.25em) translateY(3em);
} cube.foot top {
height: 5.5em;
width: 2.5em;
-webkit-transform: rotateX(90deg) translateZ(-0.25em);
-ms-transform: rotateX(90deg) translateZ(-0.25em);
transform: rotateX(90deg) translateZ(-0.25em);
}
/*------------------------------*/
cube.dress {
height: 3em;
width: 6em;
background:none;
border:none;
-webkit-transform: translateZ(0em) rotateX(0deg) rotateY(0deg);
transform: translateZ(0em) rotateX(0deg) rotateY(0deg);
}
cube.dress back {
height: 3em;
width: 6em;
-webkit-transform: rotateX(180deg) translateZ(2.0em) rotateX(-33deg) translateY(-3em);
-ms-transform: rotateX(180deg) translateZ(2.0em) rotateX(-33deg) translateY(-3em);
transform: rotateX(180deg) translateZ(2.0em) rotateX(-33deg) translateY(-3em);
} cube.dress front {
height: 3em;
width: 6em;
-webkit-transform: rotateY(0deg) translateZ(2.0em) rotateX(33deg) translateY(3em);
-ms-transform: rotateY(0deg) translateZ(2.0em) rotateX(33deg) translateY(3em);
transform: rotateY(0deg) translateZ(2.0em) rotateX(33deg) translateY(3em);
} cube.dress left {
height: 3em;
width: 6em;
-webkit-transform: rotateY(-90deg) translateZ(2.0em) rotateX(33deg) translateY(3em);
-ms-transform: rotateY(-90deg) translateZ(2.0em) rotateX(33deg) translateY(3em);
transform: rotateY(-90deg) translateZ(2.0em) rotateX(33deg) translateY(3em);
} cube.dress right {
height: 3em;
width: 6em;
-webkit-transform: rotateY(90deg) translateZ(2.0em) rotateX(33deg) translateY(3em);
-ms-transform: rotateY(90deg) translateZ(2.0em) rotateX(33deg) translateY(3em);
transform: rotateY(90deg) translateZ(2.0em) rotateX(33deg) translateY(3em);
}
/*------------animate-------------*/
/*--------------------*/
.lHand{
animation: lhand 2s infinite linear;
-moz-animation: lhand 2s infinite linear; /* Firefox */
-webkit-animation: lhand 2s infinite linear; /* Safari 和 Chrome */
-webkit-animation-direction:alternate;
}
@keyframes lhand
{
from {
transform: rotateX(-50deg) rotateZ(-5deg);
}
to {
transform: rotateX(50deg) rotateZ(5deg);
}
}
@-moz-keyframes lhand /* Firefox */
{
from {
-moz-transform: rotateX(-50deg) rotateZ(-5deg);
}
to {
-moz-transform: rotateX(50deg) rotateZ(5deg);
}
}
@-webkit-keyframes lhand /* Safari 和 Chrome */
{
from {
-webkit-transform: rotateX(-50deg) rotateZ(-5deg);
}
to {
-webkit-transform: rotateX(50deg) rotateZ(5deg);
}
}
/*--------------------*/
.rHand{
animation: rhand 2s infinite linear;
-moz-animation: rhand 2s infinite linear; /* Firefox */
-webkit-animation: rhand 2s infinite linear; /* Safari 和 Chrome */
-webkit-animation-direction:alternate;
}
@keyframes rhand
{
from {
transform: rotateX(50deg) rotateZ(5deg);
}
to {
transform: rotateX(-50deg) rotateZ(-5deg);
}
}
@-moz-keyframes rhand /* Firefox */
{
from {
-moz-transform: rotateX(50deg) rotateZ(5deg);
}
to {
-moz-transform: rotateX(-50deg) rotateZ(-5deg);
}
}
@-webkit-keyframes rhand /* Safari 和 Chrome */
{
from {
-webkit-transform: rotateX(50deg) rotateZ(5deg);
}
to {
-webkit-transform: rotateX(-50deg) rotateZ(-5deg);
}
}
/*--------------------*/
.LFoot{
animation: lfoot 2s infinite linear;
-moz-animation: lfoot 2s infinite linear; /* Firefox */
-webkit-animation: lfoot 2s infinite linear; /* Safari 和 Chrome */
-webkit-animation-direction:alternate;
}
@keyframes lfoot
{
from {
transform: rotateX(30deg) rotateZ(5deg);
}
to {
transform: rotateX(-30deg) rotateZ(-5deg);
}
}
@-moz-keyframes lfoot /* Firefox */
{
from {
-moz-transform: rotateX(30deg) rotateZ(5deg);
}
to {
-moz-transform: rotateX(-30deg) rotateZ(-5deg);
}
}
@-webkit-keyframes lfoot /* Safari 和 Chrome */
{
from {
-webkit-transform: rotateX(30deg) rotateZ(5deg);
}
to {
-webkit-transform: rotateX(-30deg) rotateZ(-5deg);
}
}
/*--------------------*/
.rFoot{
animation: rfoot 2s infinite linear;
-moz-animation: rfoot 2s infinite linear; /* Firefox */
-webkit-animation: rfoot 2s infinite linear; /* Safari 和 Chrome */
-webkit-animation-direction:alternate;
}
@keyframes rfoot
{
from {
transform: rotateX(-30deg) rotateZ(-5deg);
}
to {
transform: rotateX(30deg) rotateZ(5deg);
}
}
@-moz-keyframes rfoot /* Firefox */
{
from {
-moz-transform: rotateX(-30deg) rotateZ(-5deg);
}
to {
-moz-transform: rotateX(30deg) rotateZ(5deg);
}
}
@-webkit-keyframes rfoot /* Safari 和 Chrome */
{
from {
-webkit-transform: rotateX(-30deg) rotateZ(-5deg);
}
to {
-webkit-transform: rotateX(30deg) rotateZ(5deg);
}
}
/*--------------------*/
.header{
animation: header 3s infinite ease-out;
-moz-animation: header 3s infinite ease-out; /* Firefox */
-webkit-animation: header 3s infinite ease-out; /* Safari 和 Chrome */
-webkit-animation-direction:alternate;
}
@keyframes header
{
from {
transform: rotateX(-8deg) rotateY(-10deg);
}
to {
transform: rotateX(8deg) rotateY(10deg);
}
}
@-moz-keyframes header /* Firefox */
{
from {
-moz-transform: rotateX(-8deg) rotateY(-10deg);
}
to {
-moz-transform: rotateX(8deg) rotateY(10deg);
}
}
@-webkit-keyframes header /* Safari 和 Chrome */
{
from {
-webkit-transform: rotateX(-8deg) rotateY(-10deg);
}
to {
-webkit-transform: rotateX(8deg) rotateY(10deg);
}
}
/*--------------------*/
.all{
animation: all 8s infinite linear;
-moz-animation: all 8s infinite linear;
-webkit-animation: all 8s infinite linear;
-webkit-animation-direction:alternate;
}
@keyframes all
{
from {
transform: rotateY(20deg);
}
to {
transform: rotateY(50deg);
}
}
@-moz-keyframes all /* Firefox */
{
from {
-moz-transform: rotateY(20deg);
}
to {
-moz-transform: rotateY(50deg);
}
}
@-webkit-keyframes all /* Safari 和 Chrome */
{
from {
-webkit-transform: rotateY(20deg);
}
to {
-webkit-transform: rotateY(50deg);
}
}
</style>
<body>
<cube class="all" style=''>
<cube class="header" style='top:-6em;left:-3.5em'>
<back></back>
<bottom></bottom>
<front></front>
<left></left>
<right></right>
<top></top>
</cube>
<cube class="body" style=''>
<back></back>
<bottom></bottom>
<front></front>
<left></left>
<right></right>
<top></top>
</cube>
<cube class="hand lHand" style='top:0.5em;left:-3.5em;'>
<back></back>
<bottom></bottom>
<front></front>
<left></left>
<right></right>
<top></top>
</cube>
<cube class="hand rHand" style='top:0.5em;left:6.5em;'>
<back></back>
<bottom></bottom>
<front></front>
<left></left>
<right></right>
<top></top>
</cube>
<cube class="foot LFoot" style='top:6.5em;left:0.25em;'>
<back></back>
<bottom></bottom>
<front></front>
<left></left>
<right></right>
<top></top>
</cube>
<cube class="foot rFoot" style='top:6.5em;left:3.25em;'>
<back></back>
<bottom></bottom>
<front></front>
<left></left>
<right></right>
<top></top>
</cube>
<cube class="dress" style='top:6em;left:0em;'>
<back></back>
<front></front>
<left></left>
<right></right>
</cube>
</cube>
<script>
</script>
</body>
</html>
rar：http://download.csdn.net/detail/wangxsh42/8565415
[原][CSS3]会动的盒子机器人的更多相关文章
- 纯代码利用CSS3 圆角边框和盒子阴影 制作 iphone 手机效果
原文:纯代码利用CSS3 圆角边框和盒子阴影 制作 iphone 手机效果 大家好,我是小强老师. 今天我们看下CSS3最为简单的两个属性. css3给我们带来了很多视觉的感受和变化,以前的图片做的事 ...
- css3常用动效以及总结
(迁移自旧博客2017 08 06) CSS3 文本效果: box-shadow:盒子阴影,可以给卡片添加提高美化效果.可广泛应用于内容展示页面. <div class="card&q ...
- css3圆角矩形、盒子阴影
css3圆角矩形 div{ width: 200px; height: 200px; border: #f00 solid 1px; margin-bottom: 10px; } 1.设置 borde ...
- CSS3 --添加阴影（盒子阴影、文本阴影的使用）
CSS3 - 给div或者文字添加阴影(盒子阴影.文本阴影的使用)CSS3定义了两种阴影:盒子阴影和文本阴影.其中盒子阴影需要IE9及其更新版本,而文本阴影需要IE10及其更新版本.下面分别介绍两种 ...
- CSS3:box-sizing:不再为盒子模型而烦恼
题外话: W3C奉行的标准,就是content-box,就是须要计算边框,填充还有内容的;可是就我个人而言, 比較喜欢的是传统IE6时候的怪异模式,不用考虑容器是否会被撑开(打乱布局); 盒子模型差异 ...
- CSS3中的弹性盒子模型
介绍 在css2当中,存在标准模式下的盒子模型和IE下的怪异盒子模型.这两种方案表示的是一种盒子模型的渲染模式.而在css3当中,新增加了弹性盒子模型,弹性盒子模型是一种新增加的强大的.灵活的布局方案 ...
- css3 动画+动画库
css3 动画 实现原理 1.transition 过渡:https://www.runoob.com/cssref/css3-pr-transition.html 语法:( transition的 ...
- CSS3 Flex Box 弹性盒子、弹性布局
目录 1. 概要 2. justify-content 属性 3. align-items 属性 4. flex-wrap 属性 5. align-content 属性 6. 居中 7. align- ...
- [CSS3] 学习笔记--CSS盒子模型
1.CSS盒子模型概述 盒子模型的内容范围包括:margin(外边距).border(边框).padding(内边距).content(内容)部分组成. 2.内边距 内边距在content外,bord ...
随机推荐
- java JFileChooser选择文件和保存文件
//文件过滤器import java.io.File; import javax.swing.filechooser.FileFilter; public class MyFilter extends ...
- 关于IIS部署时出现“System.Data.OracleClient 需要 Oracle 客户端软件 8.1.7 或更高版本”的问题解决摘要
系统环境:windows2008 X64 IIS版本:iis7 oracle客户端版本:11g,另外装了32位的客户端. 网站.net framework版本: 4.0 目前状况,IIS可以正常运行, ...
- Unity 游戏存档 PlayerPrefs类的用法
unity3d提供了一个用于本地持久化保存与读取的类--PlayerPrefs.工作原理非常简单,以键值对的形式将数据保存在文件中,然后程序可以根据这个名称取出上次保存的数值. PlayerPr ...
- IOS开发－KVO
一.什么是kvo? key-value observing,观察者模式 观察者,观察对象属性的变化,当被观察者该属性发生变化时,观察者会接收到通知,可以在回调函数中做相应的处理 二.有什么作用? 变化 ...
- Eclipse快捷键(转)
Ctrl+1 快速修复(最经典的快捷键,就不用多说了)Ctrl+D: 删除当前行 Ctrl+Alt+↓ 复制当前行到下一行(复制增加)Ctrl+Alt+↑ 复制当前行到上一行(复制增加)Alt+↓ 当 ...
- The conversion of a datetime2 data type to a datetime data type resulted in an out-of-range value. 错误的原因及解决方案
异常描述: 数据访问用EF,在数据库中用getdate()设置的默认值,程序中没有赋值. 出现异常. 此错误在百度上在我写此文之前没有多少解决方案,谷歌之等到以下两个有用的页: http://stac ...
- 利用Travis CI 让你的github项目持续构建
Travis CI 是目前新兴的开源持续集成构建项目,它与jenkins,GO的很明显的特别在于采用yaml格式,简洁清新独树一帜.目前大多数的github项目都已经移入到Travis CI的构建队列 ...
- 实时数据显示--SignalR实例演示
近段时间,有实现一个看板的功能,就是用户更新信息时,即是对数据库的数据进行插入,更新,或是删除时,在墙上的屏幕的数据不需要人为去刷新,用户就能看到更新后的数据. 实现此功能,Insus.NET使用Si ...
- 全动态Portlet点击后选中样式
1 背景概述 在配置公司云平台的帮助信息过程中,由于使用的全动态portlet的数据URL获取到的是静态数据,没有办法在后台做选中的逻辑判断,所以需要在前台来控制选中列表的样式,这里将对前台选中列表 ...
- 介绍开源的.net通信框架NetworkComms框架 源码分析（十九 ）ConnectionIncomingData
原文网址: http://www.cnblogs.com/csdev Networkcomms 是一款C# 语言编写的TCP/UDP通信框架 作者是英国人 以前是收费的 目前作者已经开源 许可是 ...