个人制作-css+html旋转立方体的制作
源代码:
<!DOCTYPE html>
<html>
<head>
<title></title>
<meta charset="utf-8">
<style type="text/css">
body{
background-color: #000;
}
.outer{
width: 400px;
height: 400px;
border:1px solid #000;
margin: 300px 500px;
position: relative;
transform-style: preserve-3d;
transform: rotateX(-38deg)rotateY(-35deg) ;
animation: mofang 5s linear infinite;
}
@keyframes mofang{
from{
transform:rotateX(0deg) rotateY(0deg);
}
50%{
transform:rotateY(120deg) rotateZ(240deg);
}
to{
transform:rotateX(360deg) rotateY(360deg);
}
}
.inner{
width: 400px;
height: 400px;
border:2px solid #000;
position: absolute;
-webkit-backface-visibility:visibility;
opacity: 0.5;
}
.inner:nth-child(1){
transform: translateY(200px)rotateX(90deg);
background-color: orange;
}
.inner:nth-child(2){
transform: translateY(-200px)rotateX(90deg);
background-color: blue;
}
.inner:nth-child(3){
transform: translateY(100px)rotateX(90deg);
}
.inner:nth-child(4){
transform: translateY(-100px)rotateX(90deg);
}
.inner:nth-child(5){
transform: translateZ(200px);
background-color: pink;
}
.inner:nth-child(6){
transform: translateZ(100px);
}
.inner:nth-child(7){
transform: translateZ(-200px);
background-color: yellow;
}
.inner:nth-child(8){
transform: translateZ(-100px);
}
.inner:nth-child(9){
transform: translateX(100px)rotateY(90deg);
}
.inner:nth-child(10){
transform: translateX(-100px)rotateY(90deg);
}
.inner:nth-child(11){
transform: translateX(200px)rotateY(90deg);
background-color: red;
}
.inner:nth-child(12){
transform: translateX(-200px)rotateY(90deg);
background-color: green;
}
.inner:nth-child(13){
transform:rotateY(90deg);
}
.inner:nth-child(14){
transform:rotateY(90deg);
}
.inner:nth-child(15){
transform:rotateX(90deg);
}
.inner:nth-child(16){
transform:rotateZ(90deg);
}
</style>
</head>
<body>
<div class="outer">
<div class="inner"></div>
<div class="inner"></div>
<div class="inner"></div>
<div class="inner"></div>
<div class="inner"></div>
<div class="inner"></div>
<div class="inner"></div>
<div class="inner"></div>
<div class="inner"></div>
<div class="inner"></div>
<div class="inner"></div>
<div class="inner"></div>
<div class="inner"></div>
<div class="inner"></div>
<div class="inner"></div>
<div class="inner"></div>
</div>
</body>
</html>
效果图:
个人制作-css+html旋转立方体的制作的更多相关文章
- CSS之旋转立方体
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...
- No.5 - 纯 CSS 制作绕中轴旋转的立方体
body{ background-color: #000; margin:; padding:; } main{ perspective: 800px; } .cube{ transform-styl ...
- 用CSS伪类制作一个不断旋转的八卦图?
前言 介绍一下如何制作一个不断旋转的八卦图.快速预览代码及效果,点击:八卦图 代码如下: HTML部分 <!DOCTYPE html> <html> <head> ...
- 纯CSS炫酷3D旋转立方体进度条特效
在网站制作中,提高用户体验度是一项非常重要的任务.一个创意设计不但能吸引用户的眼球,还能大大的提高用户的体验.在这篇文章中,我们将大胆的将前面所学的3D立方体和进度条结合起来,制作一款纯CSS3的3D ...
- Flexbox制作CSS布局实现水平垂直居中
Flexbox实现一个div元素在body页面中水平垂直居中: <!DOCTYPE html><html lang="en"><head> & ...
- 纯CSS3超酷3D旋转立方体动画特效
简要教程 这是一款神奇的纯 CSS3 立方体动画特效插件.使用CSS3来制作动画效果已经成为WEB前端开发的一种时尚,从简单的颜色和尺寸动画,到复杂的旋转.翻转动画, CSS3 展现了它无穷的魅力.使 ...
- css3之3D 旋转立方体与哆啦A梦
主要记录两个css3 3D转换的示例 ㈠哆啦A梦 三个哆啦A梦的图片,分别让其围绕X轴,Y轴,Z轴旋转60度,鼠标放上开始发生变化. 具体代码如下图所示: <!DOCTYPE html> ...
- html + css 01: 3d立方体
html + css实现3d立方体 css代码 /*页面背景色*/ body{ background-color: black; background-repeat:no-repeat; } /*** ...
- Windows PE3.0制作方法(从Win7中提取制作)
Windows PE3.0制作方法(从Win7中提取制作 在d:新建文件夹winpe,在winpe中新建sources.pe3和new文件夹,把附件中提供的工具imagex连文件夹一起放到winpe目 ...
随机推荐
- 设计模式(2)--单例模式(Singleton Pattern)
概述 一个类能返回对象一个引用(永远是同一个)和一个获得该实例的方法(必须是静态方法,通常使用getInstance这个名称):当我们调用这个方法时,如果类持有的引用不为空就返回这个引用,如果类保持的 ...
- struts入门实例
入门实例 1 .下载struts-2.3.16.3-all .不摆了.看哈就会下载了. 2 . 解压 后 找到 apps 文件夹. 3. 打开后将 struts2-blank.war ...
- Maven 从svn下载后,pom.xml报错解决方案
Multiple annotations found at this line: - Execution default-testResources of goal org.apache.maven. ...
- Ant 安装
今天介绍一下Ant的安装,在开始安装之前,还有一些工作需要做.如果你是Java开发者,那么你需要确认正确安装了JDK,并且配置好了Java的环境变量,如果你是Android开发者,那么你还要确认安装了 ...
- JavaScript—赋值表达式
赋值表达式的运算顺序是从右到左的,因此,可以通过以下方法对多个变量赋值 1 i=j=k=0;//也就是把三个变量初始化为0 赋值表达式中的递增和递减 n++和++n的区别: 简单来说,根据 ...
- Tyvj 题目1463 智商问题(分块)
P1463 智商问题 时间: 1500ms / 空间: 131072KiB / Java类名: Main 背景 各种数据结构帝~各种小姊妹帝~各种一遍AC帝~ 来吧! 描述 某个同学又有很多小姊妹了他 ...
- Git忽略规则及.gitignore规则不生效的解决办法
在git中如果想忽略掉某个文件,不让这个文件提交到版本库中,可以使用修改根目录中 .gitignore 文件的方法(如无,则需自己手工建立此文件).这个文件每一行保存了一个匹配的规则例如: # 此为注 ...
- android 代码优化
http://android.tgbus.com/Android/androidnews/200812/172247.shtml http://blog.163.com/jzq_520/blog/st ...
- ie11浏览器和chrome浏览器对于bgsound和background的一些区别
今天在编写一个非常简单的网页的时候,按照书上写的,使用了一个jpg图片作为背景图片,用background属性放在<body>标签内,同时使用<bgsound>标签插入背景音乐 ...
- jquery中的children()和contents()的区别
1.children()只会返回元素节点 2.contents()还可以返回文本节点