php立方体相册源码,纯CSS实现3D的代码（正方体、动态立体图片册、平面的星空）...

本篇文章所说的内容是纯CSS实现3D的代码(正方体、动态立体图片册、平面的星空)，代码都非常详细，有需要的朋友可以看一下。

一、正方体

我认为正方体可以算是3D图像的基础吧，首先正方体是由六个相同的面所组成，其次就需要我们依次构造。(据体构造在代码中)

代码如下：

正方体

.d3{

height: 300px;

width:300px;

perspective: 800px;

margin:140px auto;

border:1px solid #ccc; }

.stage{

height: 300px;

width: 300px;

transform-style: preserve-3d;

position: relative;

transform: rotateX(45deg) rotateY(45deg);

}

.role{

height: 300px;

width: 300px;

position: absolute;

}

.stage{

animation: dong 3s linear infinite;(这是舞台)

}

.stage:hover{

animation: paused;

}

@keyframes dong{(这是使舞台旋转的动画)

from{

transform: rotateX(45deg) rotateY(45deg);

}

to{

transform: rotateX(405deg) rotateY(405deg);

}

}

.di1{(正方体的前面)

background: rgb(21, 163, 52);

transform: translateZ(150px);(沿着z轴向前移动150px)

font-size:100px;

font-family:KaiTi;

text-align: center;

line-height: 300px;

}

.di2{(正方体的后面)

background: blue;

transform: translateZ(-150px) rotateY(180deg);(沿着z轴向前移动150px然后沿着y轴旋转180°*注意顺序哦是先移动后旋转)

font-size:100px;

font-family:KaiTi;

text-align: center;

line-height: 300px;

}

.di3{(正方体的左面)

background: purple;

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

font-size:100px;

font-family:KaiTi;

text-align: center;

line-height: 300px;

}

.di4{(正方体的右面)

background: pink;

transform: rotateY(90deg) translateZ(150px);

font-size:100px;

font-family:KaiTi;

text-align: center;

line-height: 300px;

}

.di5{(正方体的上面)

background: red;

transform: rotateX(90deg) translateZ(150px);

font-size:100px;

font-family:KaiTi;

text-align: center;

line-height: 300px;

}

.di6{(正方体的下面)

background: yellow;

transform: rotateX(-90deg) translateZ(150px);

font-size:100px;

font-family:KaiTi;

text-align: center;

line-height: 300px;

}

(将正方体分为六个相同的面)

前

后

左

右

上

下

二、动态立体图片册

将图片册设计成立体3D的效果

利用旋转、移动、倾斜和3D效果让你的图册更加漂亮。

代码如下：(将第一张定好位置后将后面的依次排列)

事例一

body{

height: 100vh;

}

.div {

height: 500px;

width: 800px;

perspective: 800px;

margin: 50px auto;

}

.div1 {

height: 500px;

width: 800px;

transform-style: preserve-3d;

position: relative;

/* transform: rotateY(-10deg); */

}

.div_0{

height:400px;

width:600px;

position: absolute;

margin-top:110px;

margin-left:50px;

}

.div_1{

height:400px;

width:600px;

background: url(../day03/timg.jpg);

background-size: 600px 400px;

border-radius: 20px;

transform-origin: right bottom;

transition: 3s;

}

.div_2{

background: url(../day03/timg1.jpg);

border-radius: 20px;

background-size: 600px 400px;

transform-origin: right bottom;

transform: rotateZ(2deg) translateZ(-20px) translateX(20px) translateY(-20px);

}

.div_2:hover{

transform: rotateZ(0) translateZ(0)translateX(0)translateY(0);

transition: 1s;

}

.div_2:hover~.div_1{

/* transform-origin: right bottom; */

transform: rotateZ(2deg) translateZ(20px) translateX(20px) translateY(-20px);

transition: 1s;

}

/* body:hover .div_1{

opacity: 0;

transition: 3s;

} */

.div_3{

background: url(timg2.jpg);

border-radius: 20px;

background-size: 600px 400px;

transform-origin: right bottom;

transform: rotateZ(4deg)translateZ(-40px)translateX(40px)translateY(-40px);

}

.div_3:hover{

transform: rotateZ(0) translateZ(0)translateX(0)translateY(0);

transition: 1s;

}

.div_4{

background: url(timg4.jpg);

border-radius: 20px;

background-size: 600px 400px;

transform-origin: right bottom;

transform: rotateZ(6deg)translateZ(-60px) translateX(60px)translateY(-60px);

}

.div_4:hover{

transform: rotateZ(0) translateZ(0)translateX(0)translateY(0);

transition: 1s;

}

.div_5{

background: url(timg5.jpg);

border-radius: 20px;

background-size: 600px 400px;

transform-origin: right bottom;

transform: rotateZ(8deg)translateZ(-80px) translateX(80px)translateY(-80px);

}

.div_5:hover{

transform: rotateZ(0) translateZ(0)translateX(0)translateY(0);

transition: 1s;

}

.div_6{

background: url(timg3.jpg) no-repeat;

border-radius: 20px;

background-size: 600px 400px;

transform-origin: right bottom;

transform: rotateZ(10deg)translateZ(-100px) translateX(100px)translateY(-100px);

}

.div_6:hover{

transform: rotateZ(0) translateZ(0)translateX(0)translateY(0);

transition: 1s;

}

三、平面的星空

代码如下：

(由于没有用js所以只有平面的效果了

你掌握好旋转的中心点就很容易了)

太阳系

body {

background: url(timg01.jpg) no-repeat;

background-size: 100%;

}

.box1 {

height: 600px;

width: 600px;

margin: 0 auto;

border: 1px solid #ccc;

border-radius: 50%;

}

.box1_0 {

height: 100px;

width: 100px;

margin: 0 auto;

border: 1px solid white;

border-radius: 50%;

position: absolute;

top: calc(50% - 59px);

left: 322px;

transform-origin: 345.5px;

animation: dong2 5s linear infinite 4s;

}

@keyframes dong2 {

from {

transform: rotate(0)

}

100% {

transform: rotate(360deg);

}

}

.box1_2 {

height: 13px;

width: 13px;

margin: 0 auto;

/* border: 1px solid #ccc; */

border-radius: 50%;

background: white;

position: absolute;

top: calc(50% - 7.5px);

left: 96px;

transform-origin: -45px;

animation: dong3 5.5s linear infinite ;

/* animation-iteration-count: 200; */

}

@keyframes dong3 {

from {

transform: rotate(0);

}

100% {

transform: rotate(360deg);

}

}

.box1_1 {

height: 15px;

width: 15px;

margin: 0 auto;

/* border: 1px solid #ccc; */

border-radius: 50%;

background: rgb(7, 100, 223);

position: absolute;

top: 45px;

left: calc(50% - 16.5px);

}

.box2 {

height: 400px;

width: 400px;

margin: 0 auto;

border: 1px solid #ccc;

border-radius: 50%;

position: absolute;

top: calc(50% - 200px);

left: calc(50% - 200px);

}

.box2_1 {

height: 15px;

width: 15px;

margin: 0 auto;

/* border: 1px solid #ccc; */

border-radius: 50%;

background: rgb(198, 208, 221);

position: absolute;

top: calc(50% - 7.5px);

left: 43px;

transform-origin: 157.5px;

animation: dong1 5s linear infinite .5s;

}

@keyframes dong1 {

from {

transform: rotate(0)

}

100% {

transform: rotate(360deg);

}

}

.box2_2 {

height: 15px;

width: 15px;

margin: 0 auto;

border-radius: 50%;

background: #644e11;

position: absolute;

top: calc(50% - 7.5px);

left: -7px;

transform-origin: 207.5px;

animation: dong 5s linear infinite;

}

@keyframes dong {

from {

transform: rotate(0)

}

100% {

transform: rotate(360deg);

}

}

.box3 {

height: 300px;

width: 300px;

margin: 0 auto;

border: 1px solid #ccc;

border-radius: 50%;

position: absolute;

top: calc(50% - 150px);

left: calc(50% - 150px);

}

.box4 {

height: 30px;

width: 30px;

margin: 0 auto;

border-radius: 50%;

background: orange;

position: absolute;

top: calc(50% - 15px);

left: calc(50% - 15px);

}

.boxli{

height: 900px;

width: 900px;

margin: 0 auto;

border: 1px solid #ccc;

border-radius: 50%;

position: absolute;

top:-120px;

left:calc(50% - 450px);

}

.boxli_1{

height: 15px;

width: 15px;

margin: 0 auto;

border-radius: 50%;

background: rgb(116, 100, 56);

position: absolute;

top:500px;

left:-6px;

transform-origin: 455.5px -38px;

animation: dongli 5s linear infinite;

}

@keyframes dongli {

from {

transform: rotate(0)

}

100% {

transform: rotate(360deg);

}

}

相关推荐：