css3d动画库,css3D动画

css3D动画

前言

最近玩了玩用css来构建3D效果，写了几个demo，所以博客总结一下。 在阅读这篇博客之前，请先自行了解一下css 3D的属性，例如：transform-style，transform-origin，transform, perspective。

写一个简单的立方体

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

• 1
• 2
• 3
• 4
• 5
• 6

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+动画的效果

demo01

代码如下：

书页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:hover{

transform-origin: right;

transform: rotateY(-60deg);

} */

.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);

}

效果如下图：

demo02

代码如下：

立方体

*{

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);

}

}

效果如下图：

持续更新，欢迎大家指教！