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怎么实现简单的立方体”的内容就介绍到这里了,感谢大家的阅读。如果想了解更多行业相关的知识,可以关注创新互联行业资讯频道,小编每天都会为大家更新不同的知识点。


本文标题:css3怎么实现简单的立方体
本文网址:http://scyanting.com/article/jopjjc.html