分享更有价值
被信任是一种快乐

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

相关推荐: div内容水平居中与div内容垂直居中的方法

本文小编为大家详细介绍“div内容水平居中与div内容垂直居中的方法”,内容详细,步骤清晰,细节处理妥当,希望这篇“div内容水平居中与div内容垂直居中的方法”文章能帮助大家解决疑惑,下面跟着小编的思路慢慢深入,一起来学习新知识吧。 div模式水准居中相比机…

文章页内容下
赞(0) 打赏
版权声明:本站采用知识共享、学习交流,不允许用于商业用途;文章由发布者自行承担一切责任,与本站无关。
文章页正文下
文章页评论上

云服务器、web空间可免费试用

宝塔面板主机、支持php,mysql等,SSL部署;安全高速企业专供99.999%稳定,另有高防主机、不限制内容等类型,具体可咨询QQ:360163164,Tel同微信:18905205712

主机选购导航云服务器试用

登录

找回密码

注册