<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>CSS之旋转立方体</title>
<style>
*{ font-size:200px;}
/*大元素*/
.wrap {
position:relative;
width:400px; height:400px;
margin:100px auto;
perspective: 800px;
-webkit-perspective: 800px;
-moz-perspective: 800px;
-ms-perspective: 800px;
-o-perspective: 800px;
perspective-origin: 50% 100px;
-webkit-perspective-origin: 50% 100px;
-moz-perspective-origin: 50% 100px;
-ms-perspective-origin: 50% 100px;
-o-perspective-origin: 50% 100px;
}
/*所有div容器*/
.cube {
position: relative;
width: 200px;
transform-style: preserve-3d;
-webkit-transform-style: preserve-3d;
-moz-transform-style: preserve-3d;
-ms-transform-style: preserve-3d;
-o-transform-style: preserve-3d;

}
/*盒子各面共用的CSS*/
.cube div {
position: absolute;
width: 200px;
height: 200px;
opacity:1;
}
/*盒子各面的位置*/
.back {
transform: translateZ(-100px) rotateY(180deg);
-webkit-transform: translateZ(-100px) rotateY(180deg);
-moz-transform: translateZ(-100px) rotateY(180deg);
-ms-transform: translateZ(-100px) rotateY(180deg);
-o-transform: translateZ(-100px) rotateY(180deg);
background-color:#ff0000;
background-size:200px;
}
.right {
transform: rotateY(-270deg) translateX(100px);
-webkit-transform: rotateY(-270deg) translateX(100px);
-moz-transform: rotateY(-270deg) translateX(100px);
-ms-transform: rotateY(-270deg) translateX(100px);
-o-transform: rotateY(-270deg) translateX(100px);
transform-origin: top right;
-webkit-transform-origin: top right;
-moz-transform-origin: top right;
-ms-transform-origin: top right;
-o-transform-origin: top right;
background-color:#ff00ff;
background-size:200px;
}
.left {
transform: rotateY(270deg) translateX(-100px);
-webkit-transform: rotateY(270deg) translateX(-100px);
-moz-transform: rotateY(270deg) translateX(-100px);
-ms-transform: rotateY(270deg) translateX(-100px);
-o-transform: rotateY(270deg) translateX(-100px);
transform-origin: center left;
-webkit-transform-origin: center left;
-moz-transform-origin: center left;
-ms-transform-origin: center left;
-o-transform-origin: center left;
background-color:#00ff00;
background-size:200px;
}
.top {
transform: rotateX(-90deg) translateY(-100px);
-webkit-transform: rotateX(-90deg) translateY(-100px);
-moz-transform: rotateX(-90deg) translateY(-100px);
-ms-transform: rotateX(-90deg) translateY(-100px);
-o-transform: rotateX(-90deg) translateY(-100px);
transform-origin: top center;
-webkit-transform-origin: top center;
-moz-transform-origin: top center;
-ms-transform-origin: top center;
-o-transform-origin: top center;
background-color:#ffff00;
background-size:200px;
}
.bottom {
transform: rotateX(90deg) translateY(100px);
-webkit-transform: rotateX(90deg) translateY(100px);
-moz-transform: rotateX(90deg) translateY(100px);
-ms-transform: rotateX(90deg) translateY(100px);
-o-transform: rotateX(90deg) translateY(100px);
transform-origin: bottom center;
-webkit-transform-origin: bottom center;
-moz-transform-origin: bottom center;
-ms-transform-origin: bottom center;
-o-transform-origin: bottom center;
background-color:#00ffff;
background-size:200px;
}
.front {
transform: translateZ(100px);
-webkit-transform: translateZ(100px);
-moz-transform: translateZ(100px);
-ms-transform: translateZ(100px);
-o-transform: translateZ(100px);
background-color:#0000f00;
background-size:300px;
}
/*动起来*/
@keyframes spin {
from { transform: rotateY(0); }
to { transform: rotateY(360deg); }
}
@-webkit-keyframes spin {
from { -webkit-transform: rotateY(0); }
to { -webkit-transform: rotateY(360deg); }
}
@-moz-keyframes spin {
from { -moz-transform: rotateY(0); }
to { -moz-transform: rotateY(360deg); }
}
@-ms-keyframes spin {
from { -ms-transform: rotateY(0); }
to { -ms-transform: rotateY(360deg); }
}
@-o-keyframes spin {
from { -o-transform: rotateY(0); }
to { -o-transform: rotateY(360deg); }
}
.cube {
animation: spin 5s infinite linear;
-webkit-animation: spin 5s infinite linear;
-moz-animation: spin 5s infinite linear;
-ms-animation: spin 5s infinite linear;
-o-animation: spin 5s infinite linear;
}
</style>
</head>

<body>
<div class="wrap">
<div class="cube">
<div class="front"></div>
<div class="back"></div>
<div class="top"></div>
<div class="bottom"></div>
<div class="left"></div>
<div class="right"></div>
</div>
</div>
</body>
</html>

CSS之旋转立方体的更多相关文章

  1. 个人制作-css+html旋转立方体的制作

    源代码: <!DOCTYPE html><html><head>    <title></title>    <meta charse ...

  2. 纯CSS炫酷3D旋转立方体进度条特效

    在网站制作中,提高用户体验度是一项非常重要的任务.一个创意设计不但能吸引用户的眼球,还能大大的提高用户的体验.在这篇文章中,我们将大胆的将前面所学的3D立方体和进度条结合起来,制作一款纯CSS3的3D ...

  3. 纯CSS3超酷3D旋转立方体动画特效

    简要教程 这是一款神奇的纯 CSS3 立方体动画特效插件.使用CSS3来制作动画效果已经成为WEB前端开发的一种时尚,从简单的颜色和尺寸动画,到复杂的旋转.翻转动画, CSS3 展现了它无穷的魅力.使 ...

  4. css3之3D 旋转立方体与哆啦A梦

    主要记录两个css3 3D转换的示例   ㈠哆啦A梦 三个哆啦A梦的图片,分别让其围绕X轴,Y轴,Z轴旋转60度,鼠标放上开始发生变化. 具体代码如下图所示: <!DOCTYPE html> ...

  5. html + css 01: 3d立方体

    html + css实现3d立方体 css代码 /*页面背景色*/ body{ background-color: black; background-repeat:no-repeat; } /*** ...

  6. css3旋转立方体-_-

    <!DOCTYPE html> <html> <head lang="en"> <meta charset="UTF-8&quo ...

  7. css钻石旋转实现

    css钻石旋转实现: <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> &l ...

  8. css做旋转相册效果

    css做旋转相册效果 <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> &l ...

  9. 用css实现3D立方体旋转特效

    先来看运行后出来的效果 它是在不停运行的一个立方体 先来看html部分的代码 <div class="rect-wrap"> <!--舞台元素,设置perspec ...

随机推荐

  1. Windows 7 Ultimate（旗舰版）SP1 32/64位官方原版下载地址

    MSDN于2011年5月12日,最新发布简体中文Windows 7 Ultimate 旗舰版 SP1 DVD镜像安装包,分32位和64位两个版本.最新发行代号分别是:677486(32位),67740 ...

  2. linux设备驱动开发详解 笔记

      在目录的 Makefile 中关于 RTC_DRV_S3C 的编译脚本为: obj -$(CONFIG_RTC_DRV_S3C) += rtc-s3c.o 上述脚本意味着如果 RTC_DRV_S3 ...

  3. sql server学习路径地址

    联机丛书2005:https://docs.microsoft.com/zh-cn/previous-versions/sql/sql-server-2005/ms130214(v=sql.90) 联 ...

  4. java 字节流和字符流转换类InputStreamReader，OutPutStreamReader

    watermark/2/text/aHR0cDovL2Jsb2cuY3Nkbi5uZXQvY2pjMjExMzIy/font/5a6L5L2T/fontsize/400/fill/I0JBQkFCMA ...

  5. AE Scene开发中的观察者模式

    AE SceneGraph中的观察者模式 注意SceneControl不是观察者,它只是一个SceneGraph的拥有者:SceneViewer才是观察者,SceneGraph是被观察对象,同时观察者 ...

  6. OpenS-CAD学习（1）

    1.OpenS-CAD是一个不错的小巧的开源程序,以图层方式组织图形,可以绘制基本的线段.弧段.圆,可以进行节点对象捕捉,可以选择几何对象.对图幅进行平移.放大.缩小.可以将结果序列化保存为xml格式 ...

  7. 团队作业5-测试与发布（alpha阶段）

    团队作业5-测试与发布(alpha阶段) 一.测试 请根据团队项目中软件的需求文档.功能说明.系统设计和测试计划,写出软件的测试过程和测试结果,并回答下述问题. 1. 在测试过程中总共发现了多少Bug ...

  8. 2017-2018 ACM-ICPC Latin American Regional Programming Contest Solution

    A - Arranging tiles 留坑. B - Buggy ICPC 题意:给出一个字符串,然后有两条规则,如果打出一个辅音字母,直接接在原字符串后面,如果打出一个元音字母,那么接在原来的字符 ...

  9. open-falcon设置报警邮件

    下载编译好的二进制包并解压: https://files.cnblogs.com/files/dylan-wu/mail-provider.tar.gz [root@localhost work]# ...

  10. Flume环境安装

    源码包下载: http://archive.apache.org/dist/flume/1.8.0/ 集群环境: master 192.168.1.99 slave1 192.168.1.100 sl ...