css3制作立方体

如何用CSS3制作炫酷的立方
1.写出全部元素
首先应该在ul里面放6个li，设置ul和li的大小和颜色（ul和li的大小相同，ul，6个li分别设置不同的颜色，方便区分），方便区分。
2.给li元素添加绝对定位，使ul和6个li都在同一位置（方便li相对ul进行位移）
3.给li设置位移
6个li分别沿X轴，Y轴，Z轴进行位移，使其实现如下效果
（1）沿X轴正方向移动正方形的一半
（2）沿X轴负方向移动正方形的一半
（3）沿Y轴正方向移动正方形的一半
（4）沿Y轴负方向移动正方形的一半
（5）沿Z轴正方向移动正方形的一半
（6）沿Z轴负方向移动正方形的一半
4.li添加（沿中心）旋转使其围成一个正方体
（1）沿Y轴 90deg
（2）沿Y轴 -90deg
（3）沿X轴 -90deg
（4）沿X轴 90deg
（5）不旋转
（6）沿Y轴 180deg
最重要的是要想看到这个效果要给父元素（ul)添加3D属性，transform-style: preserve-3d;
这样就合成了一个简单的正方体
如果想让正方体"活"起来，就要给ul添加动画

如果想在大的正方体里面放一个小的正方体，
为了方便区分，小正方体用div包含6个span来实现，实现方法与大正方体一样，只是改变了div的位置，div设为绝对定位，位于ul的水平垂直居中位置。

实现代码如下：

<!DOCTYPE html>
<html>
 <head>
  <meta charset="utf-8" />
  <title></title>
  <style type="text/css">
   html,body{
    height: 100%;
   }
   li{list-style: none;}
   *{
    margin: 0;
    padding: 0;
   }
   .box{
    position: absolute;
    width: 300px;
    height: 300px;
    /*background:red;*/
    top: 0;bottom: 0;right: 0;left: 0;
    margin: auto;
    transform-style: preserve-3d;
    animation: play 3s linear infinite;
   }
   
   .box:hover{
    /*transform: rotateY(-180deg);*/
   }
   .box li{
    position: absolute;
    width: 300px;
    height: 300px;
    opacity: 0.5;
    border: 3px solid #000;
   }
   .box li:nth-child(1){
    transform: translateZ(-150px);
    /*background: green;*/
   }
   .box li:nth-child(2){
    transform: translateZ(150px);
    /*background: yellow;*/
   }
   .box li:nth-child(3){
    transform: translateX(-150px) rotateY(90deg);
    /*background: pink;*/
   }   
   .box li:nth-child(4){
    transform: translateX(150px) rotateY(90deg);
    /*background: saddlebrown;*/
   }
   .box li:nth-child(5){
    transform: translateY(-150px) rotateX(90deg);
    /*background: aqua;*/
   }
   .box li:nth-child(6){
    transform: translateY(150px) rotateX(90deg);
    /*background:#FF0000;*/
   }
   
   
   .minbox{
    position: absolute;
    width: 100px;
    height: 100px;
    /*background: black;*/
    left: 100px;
    top: 100px;
   }
   .minbox span{
    display: block;
    position: absolute;
    width: 100px;
    height: 100px;     
   }
   .minbox span:nth-child(1){
    transform: translateZ(-50px);
    background: pink;
   }
   .minbox span:nth-child(2){
    transform: translateZ(50px);
    background: red;
   }
   .minbox span:nth-child(3){
    transform: translateX(-50px) rotateY(90deg);
    background: firebrick;
   }
   .minbox span:nth-child(4){
    transform: translateX(50px) rotateY(90deg);
    background: gray;
   }
   .minbox span:nth-child(5){
    transform: translateY(50px) rotateX(90deg);
    background: aqua;
   }
   .minbox span:nth-child(6){
    transform: translateY(-50px) rotateX(90deg);
    background: coral;
   }
   @keyframes play{
    from{transform: rotateX(0deg) rotateY(0deg) /*rotateZ(360deg)*/;}
    to{transform: rotateX(360deg) rotateY(360deg)  /*rotateZ(360deg)*/;}
   }
  </style>
 </head>
 <body>
  <ul class="box">
   <li></li>
   <li></li>
   <li></li>
   <li></li>
   <li></li>
   <li></li>
   
   <div class="minbox">
    <span></span>
    <span></span>
    <span></span>
    <span></span>
    <span></span>
    <span></span>
   </div>
  </ul>
 </body>
</html>

运行结果：

当然如果想要实现这个正方体效果，不止这一个方法，移动距离和旋转中心点都可以改变
涉及知识点：
transform
功能函数：
1、transform: translate3d(x , y , z); 3d
transform: translate(x , y)
transform:translateX();
transform:translateY();
transform:translateZ(不能写百分比，只能写具体的数值); 3d
2、transform: rotate();
transform: rotate();
transform: rotateX();
transform: rotateY();
transform: rotateZ(); 3d
transform: rotate3D(x,y,z,a); 3d
0 ：不旋转；1：旋转
x：是一个0到１之间的数值，主要用来描述元素围绕X轴旋转的矢量值；
y：是一个０到１之间的数值，主要用来描述元素围绕Y轴旋转的矢量值；
z：是一个０到１之间的数值，主要用来描述元素围绕Z轴旋转的矢量值；
a：是一个角度值，主要用来指定元素在3D空间旋转的角度，如果其值为正值，元素顺时针旋转，反之元素逆时针旋转。
3、transform: scale3d();
transform: scale3d(x , y , z); 3d
transform: scale(x,y)
transform: scaleX();
transform: scaleY();
transform: scaleZ(); 3d
4、transform-style 设置3D空间的
属性值：
flat 2D （默认值）
preserve-3d 3D
5、perspective:200px; 景深
离屏幕多远的距离去观察元素，值越大幅度越小。
近大远小属性值建议设置在 900——1200；
perspective:200px; （父元素）
transform:perspective(1200px) （在子元素中使用）
6、perspective-origin : 原点设置，基点位置，观察3d元素的（位置）角度
perspective-origin：值1 值2；(父元素)
px % left top right bottom
7、 transform-origin : x y z ；
属性允许您改变被转换元素的位置，设置旋转元素的基点位置； z 不能设置%；
transform-origin ： 50% 50% 0；（默认值）

posted @ 2020-03-08 22:29 我是乐呀阅读(249) 评论(0) 收藏举报

刷新页面返回顶部

css3制作立方体

公告