1 说明：
1.1 推荐指数：★★★★
1.2 有点长，适合收藏，慢慢仔细阅读和分析代码。
1.3 推荐：谷歌浏览器和微软vscode编辑器。
1.4 部分代码来源于免费开源的网络，具体不详，经自己加工、注释和整理出来，仅供学习，如有侵权，请告知，定会及时删除。
开始讲课，生动的例子，不同的代码结构和分析
2 注意：css的位置，6个面颜色统一定义和未在css中定义单独的@keyframes。
2.1 效果图：cube1
2.2 代码：cube1.html
<!DOCTYPE HTML>
<html>
<head>
<!--meta http-equiv="Content-Type" content="text/html; charset=utf-8"-->
<meta charset="utf-8">
<title>正方体cube2</title>
<!--css放在head中-->
<style type="text/css">
/*body内的背景颜色才是网页的背景颜色*/
body{
background:rgba(95, 107, 26, 0.5);
}
* {margin:10; padding:10}
ul li {list-style:none}
/*margin:100px就是与上线的距离*/
.box {width:100%; height:100%;margin:100px auto; position:relative; perspective:800px;}
.box ul {width:300px; height:300px; position:absolute;left:0; top:300px; bottom:0; right:0; margin:auto; transform-style:preserve-3d; transition:all 10s; }
.box ul:hover {transform:rotateX(360deg) rotateY(360deg);}
.box ul li {width:300px; height:300px; text-align:center; line-height:300px; position:absolute; font-size:48px; backface-visibility:hidden;}
.box ul li:nth-child(1) {background:rgba(255,0,0,.5); transform:translateY(-150px) rotateX(90deg);}
.box ul li:nth-child(2) {background:rgba(0,255,0,.5); transform:translateY(150px) rotateX(-90deg);}
.box ul li:nth-child(3) {background:rgba(0,0,255,.5); transform:translateX(-150px) rotateY(-90deg);}
.box ul li:nth-child(4) {background:rgba(0,155,255,.5); transform:translateX(150px) rotateY(90deg);}
.box ul li:nth-child(5) {background:rgba(255,0,255,.5);transform: translateZ(150px);}
.box ul li:nth-child(6) {background:rgba(82, 231, 144, 0.5); transform:translateZ(-150px) rotateY(180deg);}
</style>
</head>
<body>
<!--div的class的ul-li法-->
<div class="box">
<ul>
<li>上</li>
<li>下</li>
<li>左</li>
<li>右</li>
<li>前</li>
<li>后</li>
</ul>
</div>
</body>
</html>
3 与上面稍有不同，就是6个面颜色单独定义，且位置居中设置，注意还采用div的class的ul-li法。
3.1 效果图：cube2
3.2 代码：cube2.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>正方体cube3</title>
<link rel="stylesheet" href="./cube3.css">
</head>
<body>
<div class="contain">
<div class="box">
<div class="face one"> </div>
<div class="face two"> </div>
<div class="face three"> </div>
<div class="face four"> </div>
<div class="face five"> </div>
<div class="face six"> </div>
</div>
</div>
</body>
</html>
4 采用css作为单独文件，本地引用和加入@keyframe的动画定义。
4.1 效果图：cube3
4.2 html代码：cube3.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>正方体cube4</title>
<!--css在head中-->
<style>
body{
background-color: black;
}
.wrapper{
/*左边400px的距离*/
margin-left: 400px;
margin-top: 200px;
position: relative;
perspective: 1600px; /*景深*/
}
.content{
animation: wang 6s ease-in-out infinite;
color: #fff;
text-align: center;
line-height: 200px;
/*内容是面的文字的字体大小*/
font-size: 80px;
height: 200px;
width: 200px;
position: relative;
transform-style: preserve-3d; /*使子元素成3D显示*/
}
.content:hover{
animation-play-state: paused; /*鼠标移入暂停动画*/
}
.box{
/*0.7代表透视效果，值越大，颜色月亮，透视越差*/
opacity: 0.5;
position: absolute;
width: 200px;
height: 200px;
}
.before{
transform: translateZ(100px);
background-color: #fae48c;
}
.after{
transform: translateZ(-100px);
background-color: black;
}
.left{
transform: rotateY(-90deg) translateZ(100px);
background-color: #9900CC;
}
.right{
transform: rotateY(90deg) translateZ(100px);
background-color: yellow;
}
.up{
transform: rotateX(90deg) translateZ(100px);
background-color: green;
}
.down{
transform: rotateX(-90deg) translateZ(100px);
background-color: greenyellow;
}
/*定义动画*/
@keyframes wang{
100% {
transform:rotateY(360deg) rotateX(360deg);
}
}
</style>
</head>
<body>
<div class="wrapper">
<div class="content">
<!--注意div之后的数字，是显示中面中间的文字-->
<div class="before box">1</div>
<div class="after box">2</div>
<div class="up box">3</div>
<div class="down box">4</div>
<div class="left box">5</div>
<div class="right box">6</div>
</div>
</div>
</body>
</html>
4.3 cube3.css代码：
/*背景颜色*/
body{
background-color: #caecec;
}
.contain {
position: relative;
perspective: 1600px;
animation: rotate-frame 30s linear infinite;
}
.box {
animation: rotate 20s ease 0s normal none infinite running ;
height: 240px;
/*与网页上线的距离*/
margin: 100px auto;
position: relative;
transform-style: preserve-3d;
width: 240px;
}
.face {
backface-visibility: hidden;
background-color: #9efa8c;
height: 240px;
opacity: 0.6;
position: absolute;
width: 240px;
}
.box .one {
background-color: #fa8c95;
transform: rotateX(90deg) translateZ(120px);
}
.box .two {
background-color:#9900CC ;
transform: translateZ(120px);
}
.box .three {
transform: rotateY(90deg) translateZ(120px);
background-color: yellow;
}
.box .four {
transform: rotateY(180deg) translateZ(120px);
background-color: green;
}
.box .five {
transform: rotateY(-90deg) translateZ(120px);
background-color: greenyellow;
}
.box .six {
transform: rotateX(-90deg) translateZ(120px) rotate(180deg);
background-color: black;
}
/*定义动画，一般放在后面*/
@keyframes rotate {
100% {
transform: rotateY(360deg) rotateX(360deg);
}
}
5 注意旋转方向设置、界面中的文字大小、位置和界面的透视度。
5.1 效果图：cube4
5.2 cube4.html代码：
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>正方体cube5</title>
<style>
*{
margin:0 auto;
padding:0;
}
/*注意html和body的背景颜色设置都是差不多*/
html{
background:rgb(14, 13, 13);
}
/*wrap=包裹*/
div.wrap{
width:200px;
perspective:1600px;/*景深*/
position:absolute;
left:50%;
top:50%;
transform: translateX(-50%) translateY(-50%);/*利用位移来处理垂直水平居中*/
}
.wrap>div.cube{
width:200px;
height:200px;
/*文字位置*/
text-align: center;
/*界面中的文字大小，注意可以使80px，也可以large这类的英文*/
font-size: 80px;
position:relative;
transform-style: preserve-3d;
transform:rotateX(-50deg) rotateY(-50deg) rotateZ(0deg);/*旋转*/
animation:move 8s infinite linear;/*动画*/
}
.cube>div{
width:100%;
height:100%;
border-radius:20px;
position:absolute;
background:pink;
box-shadow:0 0 10px currentColor;/*currentColor关键字的使用值是 color 属性值的计算值*/
}
/*hover=徘徊，盘旋*/
.cube:hover>div{
background:currentColor;
box-shadow:0 0 20px currentColor;
}
.cube div.out-front{
color: deeppink;
transform:translateZ(100px);/*转换 位移*/
}
.cube div.out-back{
color: seagreen;
transform:translateZ(-100px) rotateY(180deg);/*转换 位移 旋转*/
}
.cube div.out-left{
color: skyblue;
transform:translateX(-100px) rotateY(-90deg);
}
.cube div.out-right{
color: lightcoral;
transform:translateX(100px) rotateY(90deg);
}
.cube div.out-top{
color: mediumseagreen;
transform:translateY(-100px) rotateX(90deg);
}
.cube div.out-bottom{
color: dodgerblue;
transform:translateY(100px) rotateX(-90deg);
}
/*关键帧，定义动画*/
@keyframes move{
0% {
transform: rotateX(0deg) rotateY(0deg);
}
100% {
transform: rotateX(360deg) rotateY(360deg);
}
}
</style>
</head>
<body>
</div>
<div class="wrap">
<div class="cube">
<div class="out-front">1</div>
<div class="out-back">2</div>
<div class="out-left">3</div>
<div class="out-right">4</div>
<div class="out-top">5</div>
<div class="out-bottom">6</div>
</div>
</div>
</body>
</html>
6 注意多彩界面动态变化，html和body的背景颜色和圆角设置。
竟然加入几个英文单词学习。
6.1 效果图：cube5
6.2 cube5.html代码：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>正方体cube6</title>
</head>
<!--css放在非head和非body的独立位置，之间的位置-->
<style>
/*这种一起设置，就是相同性一致设置*/
html,body{
margin: 0;
padding: 0;
/*背景颜色为黑色*/
background-color: black;
}
/* 也是这些基本相同，一起定义设置；给每个div设置宽高，水平垂直居中 */
.container,
.container .outer,
.container .inner,
.container .inner div{
width: 16rem;
height: 16rem;
/*界面的文字颜色、大小，位置设置*/
color:yellow;
font-size: 1.8rem;
text-align: center;
line-height: 16rem;
}
/* 设置container的旋转效果，取名为roate_y,4秒、线性变化、无线循环 */
.container{
/*与网页上线的距离*/
margin: 150px auto;
animation: roate_y 4s linear infinite;
transform-style: preserve-3d;
}
/* 立方体以Y轴为中心，旋转360度 之后每4s重复*/
@keyframes roate_y{
from{transform: rotateY(0);}
to{transform: rotateY(360deg);}
}
.container .outer{
transform-style: preserve-3d;
transform: rotateX(55deg);
}
.container .inner{
transform-style: preserve-3d;
transform: rotateY(45deg);
position: relative;
}
.container .inner div{
transform-style: preserve-3d;
position: absolute;
}
.container .plane-1{
background: rgba(167, 10, 18, 0.3);
right: -8rem;
transform: rotateY(90deg);
}
.container .plane-2{
background: rgba(12, 219, 219, 0.3);
left: -8rem;
transform: rotateY(90deg);
}
.container .plane-3{
background: rgba(255, 174, 127, 0.3);
transform: translateZ(-8rem);
}
.container .plane-4{
background: rgba(68, 0, 255, 0.3);
transform: translateZ(8rem);
}
.container .plane-5{
background: rgba(98, 133, 42, 0.3);
transform: rotateX(-90deg);
bottom: -8rem;
}
.container .plane-6{
background: rgba(127,127,127,0.3);
transform: rotateX(-90deg);
top: -8rem;
}
</style>
<body>
<div class="container">
<div class="outer">
<div class="inner">
<div class="plane-1">右</div>
<div class="plane-2">左</div>
<div class="plane-3">后</div>
<div class="plane-4">前</div>
<div class="plane-5">下</div>
<div class="plane-6">上</div>
</div>
</div>
</div>
</body>
</html>
7 重点关注旋转角度的不同设置，仔细比较与上面的各自不同。
还有基础知识：
/*浏览器默认的字号16px，来看一些px单位与rem之间的转换关系：16px=1rem
为了方便计算，时常将在<html>元素中设置font-size值为62.5%:
相当于在<html>中设置font-size为10px,则16px=1.6rem
*/
7.1 效果图：cube6
7.2 cube6.html代码：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>正方体cube6</title>
</head>
<!--css放在非head和非body的独立位置，之间的位置-->
<style>
/*这种一起设置，就是相同性一致设置*/
html,body{
margin: 0;
padding: 0;
/*背景颜色为黑色*/
background-color: black;
}
/* 也是这些基本相同，一起定义设置；给每个div设置宽高，水平垂直居中 */
.container,
.container .outer,
.container .inner,
.container .inner div{
width: 16rem;
height: 16rem;
/*界面的文字颜色、大小，位置设置*/
color:yellow;
font-size: 1.8rem;
text-align: center;
line-height: 16rem;
}
/* 设置container的旋转效果，取名为roate_y,4秒、线性变化、无线循环 */
.container{
/*与网页上线的距离*/
margin: 150px auto;
animation: roate_y 4s linear infinite;
transform-style: preserve-3d;
}
/* 立方体以Y轴为中心，旋转360度 之后每4s重复*/
@keyframes roate_y{
from{transform: rotateY(0);}
to{transform: rotateY(360deg);}
}
.container .outer{
transform-style: preserve-3d;
transform: rotateX(55deg);
}
.container .inner{
transform-style: preserve-3d;
transform: rotateY(45deg);
position: relative;
}
.container .inner div{
transform-style: preserve-3d;
position: absolute;
}
.container .plane-1{
background: rgba(167, 10, 18, 0.3);
right: -8rem;
transform: rotateY(90deg);
}
.container .plane-2{
background: rgba(12, 219, 219, 0.3);
left: -8rem;
transform: rotateY(90deg);
}
.container .plane-3{
background: rgba(255, 174, 127, 0.3);
transform: translateZ(-8rem);
}
.container .plane-4{
background: rgba(68, 0, 255, 0.3);
transform: translateZ(8rem);
}
.container .plane-5{
background: rgba(98, 133, 42, 0.3);
transform: rotateX(-90deg);
bottom: -8rem;
}
.container .plane-6{
background: rgba(127,127,127,0.3);
transform: rotateX(-90deg);
top: -8rem;
}
</style>
<body>
<div class="container">
<div class="outer">
<div class="inner">
<div class="plane-1">右</div>
<div class="plane-2">左</div>
<div class="plane-3">后</div>
<div class="plane-4">前</div>
<div class="plane-5">下</div>
<div class="plane-6">上</div>
</div>
</div>
</div>
</body>
</html>
8 旋转的3d正方体的界面展开和收回，css的位置。
8.1 效果图：cube7
8.2 cube7.html代码：
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>正方体cube7</title>
</head>
<!--css放在head和body之间-->
<style>
body{
/*body和html内的背景颜色设置*/
background-color: black;
}
* {
margin: 0;
padding: 0;
}
.box {
width: 200px;
height: 250px;
margin: 10px auto;
/*与上面顶线的间距150px*/
margin-top: 150px;
position: relative;
transform-style: preserve-3d;
animation: change 10s linear infinite alternate;
}
.box>div {
width: 200px;
height: 200px;
position: absolute;
transition: all 3s;
}
.box:hover>div {
width: 300px;
height: 300px;
}
.box:hover>.tx1 {
transform: rotateX(90deg) translateZ(170px);
}
.box:hover>.tx2 {
transform: rotateX(90deg) translateZ(-170px);
}
.box:hover>.ty3 {
transform: rotateY(90deg) translateZ(170px);
}
.box:hover>.ty4 {
transform: rotateY(90deg) translateZ(-170px);
}
.box:hover>.tz5 {
transform: rotateZ(90deg) translateZ(170px);
}
.box:hover>.tz6 {
transform: rotateZ(90deg) translateZ(-170px);
}
.box>div:nth-child(1) {
/*渐变色代替*/
background: linear-gradient(45deg, red, orange);
transform: rotateX(90deg) translateZ(100px);
}
.box>div:nth-child(2) {
/*渐变色代替*/
background: linear-gradient(45deg, orange, yellow);
transform: rotateX(90deg) translateZ(-100px);
}
.box>div:nth-child(3) {
/*渐变色代替*/
background: linear-gradient(45deg, yellow, green);
transform: rotateY(90deg) translateZ(100px);
}
.box>div:nth-child(4) {
/*渐变色代替*/
background: linear-gradient(45deg, green, blue);
transform: rotateY(90deg) translateZ(-100px);
}
.box>div:nth-child(5) {
/*渐变色代替*/
background: linear-gradient(45deg, blue, #065279);
transform: translateZ(100px);
}
.box>div:nth-child(6) {
/*渐变色代替*/
background: linear-gradient(45deg, #065279, purple);
transform: translateZ(-100px);
}
/*定义动画*/
@keyframes change {
0% {
transform: rotateX(45deg) rotateZ(30deg);
}
25% {
transform: rotateX(111deg) rotateY(30deg);
}
60% {
transform: rotateZ(135deg) rotateZ(70deg);
}
100% {
transform: rotateY(205deg) rotateZ(200deg);
}
}
</style>
<body>
<!-- 正方体旋转 -->
<div class="box">
<div class="tx1"></div>
<div class="tx2"></div>
<div class="ty3"></div>
<div class="ty4"></div>
<div class="tz5"></div>
<div class="tz6"></div>
</div>
</body>
</html>
小结：比较全面，适合收藏和转发，分享出来，大家共同学习和进步。
