温馨提示×

温馨提示×

您好,登录后才能下订单哦!

密码登录×
登录注册×
其他方式登录
点击 登录注册 即表示同意《亿速云用户服务条款》

css3怎么实现简单的立方体

发布时间:2022-03-09 16:24:17 来源:亿速云 阅读:152 作者:iii 栏目:web开发

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

向AI问一下细节

免责声明:本站发布的内容(图片、视频和文字)以原创、转载和分享为主,文章观点不代表本网站立场,如果涉及侵权请联系站长邮箱:is@yisu.com进行举报,并提供相关证据,一经查实,将立刻删除涉嫌侵权内容。

AI