css3怎么实现简单的立方体

这篇文章主要介绍“css3怎么实现简单的立方体”的相关知识，小编通过实际案例向大家展示操作过程，操作方法简单快捷，实用性强，希望这篇“CSS3怎么实现简单的立方体”文章能帮助大家解决问题。

　　写一个简单的立方体

　　1、我们先用css实现一个长方体,一个长方体有6个边,我们写6个li,并用一个ul包裹起来,根据我写3D动画的经验,最好有一个父元素来包裹

　　123456

　　2、先给.parent设置宽高,并且给他设置视距和基点位置..parent{

　　width: 800px;

　　height: 400px;

　　border: 1px solid #000;

　　margin: 0 auto;

　　perspective: 2000px;

　　perspective-origin: -40% -80%;

　　background: #000;

　　}

　　3、给ul设置宽高以及preserve-3d属性保留子元素3d转换,子元素li全部绝对定位ul{

　　width: 50px;

　　position: relative;

　　margin: 100px auto;

　　transfORM-style : preserve-3d;

　　}

　　li{

　　width: 100px;

　　height: 100px;

　　background: rgba(255, 255, 0, 0.3);

　　position: absolute;

　　text-align: center;

　　border: 3px solid greenyellow;

　　}

　　效果如下图所示:

　　4、先写一个面,给他的背景设置 background: rgba(255, 255, 0, 0.3);li:nth-child(1){

　　background: rgba(255, 255, 0, 0.3);

　　transform: translateY(50px) rotateX(90deg);

　　}

　　效果如下图所示:

　　5、我们写好了第一个面,然后我们在将其他6个面调整好,变成下图所示.关于rotate的旋转方向这里不解释,不懂的朋友可以自行查看其他文档.

　　li:nth-child(1){

　　transform: translateY(-50px) rotateX(90deg);

　　}

　　li:nth-child(2){

　　transform: translateY(50px) rotateX(90deg);

　　}

　　li:nth-child(3){

　　transform: translateX(-50px) rotateY(90deg);

　　}

　　li:nth-child(4){

　　transform: translateX(50px) rotateY(90deg);

　　}

　　li:nth-child(5){

　　transform: translateZ(50px);

　　}

　　li:nth-child(6){

　　transform: translateZ(-50px);

　　}

　　效果如下图所示:

　　下面是两种css3D+动画的效果

　　1、代码如下:

　　书页2

　　.container{

　　width: 1000px;

　　height: 650px;

　　background: #000;

　　perspective: 2000px;

　　border: 1px solid transparent;

　　overflow: hidden;

　　margin: 0 auto;

　　perspective-origin: 10% 20%;

　　}

　　.cube{

　　width: 200px;

　　height: 300px;

　　transform-style: preserve-3d;

　　margin:100px auto;

　　position: relative;

　　transform: rotateX(30deg);

　　border-radius: 50%;

　　padding: 60px;

　　}

　　.mian{

　　width: 200px;

　　height: 300px;

　　background-image: url(1.jpg);

　　background-position:400px 0;

　　position: absolute;

　　border: 1px solid #ccc;

　　transition: 2s;

　　}

　　.mian1{

　　transform-origin: right;

　　transform: translateX(-200px) rotateY(45deg);

　　background-position: 0 0;

　　}

　　.mian3{

　　transform-origin: left;

　　transform: translateX(200px) rotateY(45deg);

　　background-position: 200px 0;

　　}

　　.mian3:hover{

　　transform: translateX(200px) rotateY(0deg);

　　}

　　.mian1:hover{

　　transform: translateX(-200px) rotateY(0deg);

　　}

　　2、代码如下:

　　立方体

　　*{

　　margin: 0;

　　padding: 0;

　　list-style: none;

　　}

　　.parent{

　　width: 1000px;

　　margin: 0 auto;

　　height: 600px;

　　background: black;

　　perspective: 5000px;

　　perspective-origin: -40% -120%;

　　border: 1px solid #000;

　　}

　　ul{

　　width: 100px;

　　height: 300px;

　　position: relative;

　　margin:100px auto;

　　transform-style: preserve-3d;

　　animation: zuan 3s linear infinite;

　　border: 1px solid greenyellow;

　　}

　　li{

　　width: 100px;

　　height: 300px;

　　background: rgba(0, 0, 0, 0.5);

　　position: absolute;

　　text-align: center;

　　line-height: 100px;

　　border: 3px solid greenyellow;

　　}

　　li:nth-child(1){

　　transform: rotateY(30deg) translateZ(-200px);

　　}

　　li:nth-child(2){

　　transform: rotateY(60deg) translateZ(-200px);

　　background: rgba(255, 0, 0, 0.5);

　　}

　　li:nth-child(3){

　　transform: rotateY(90deg) translateZ(-200px);

　　}

　　li:nth-child(4){

　　transform: rotateY(120deg) translateZ(-200px);

　　background: rgba(0, 0, 255, 0.5);

　　}

　　li:nth-child(5){

　　transform: rotateY(150deg) translateZ(-200px);

　　}

　　li:nth-child(6){

　　transform: rotateY(180deg) translateZ(-200px);

　　background: rgba(255, 0, 255, 0.5);

　　}

　　li:nth-child(7){

　　transform: rotateY(210deg) translateZ(-200px);

　　}

　　li:nth-child(8){

　　transform: rotateY(240deg) translateZ(-200px);

　　background: rgba(0, 255, 0, 0.5);

　　}

　　li:nth-child(9){

　　transform: rotateY(270deg) translateZ(-200px);

　　}

　　li:nth-child(10){

　　transform: rotateY(300deg) translateZ(-200px);

　　background: rgba(0, 255, 255, 0.5);

　　}

　　li:nth-child(11){

　　transform: rotateY(330deg) translateZ(-200px);

　　}

　　li:nth-child(12){

　　transform: rotateY(360deg) translateZ(-200px);

　　background: rgba(255, 255, 255, 0.5);

　　}

　　@keyframes zuan{

　　0%{

　　transform: rotateY(0deg);

　　}

　　100%{

　　transform: rotateY(360deg);

　　}

　　}

关于“css3怎么实现简单的立方体”的内容就介绍到这里了，感谢大家的阅读。如果想了解更多行业相关的知识，可以关注编程网JavaScript频道，小编每天都会为大家更新不同的知识点。