css3制作立方体

折月煮酒 提交于 2020-03-11 03:00:22

css3制作旋转立方体

一、首先制作一个立方体需要用到2D和3D一些属性和功能函数:

1、2D和3D位移:transform:translate();

​ 水平移动:向右移动translate(tx,0)和向左移动translate(-tx,0);

​ 垂直移动:向上移动translate(0,-ty)和向下移动translate(0,ty);

​ Z轴位移: translateZ();

2、2D和3D旋转:transform:rotate();

(1)2D旋转

​ rotateX() :元素围绕其 X 轴以给定的度数进行旋转

​ rotateY() :元素围绕其 Y 轴以给定的度数进行旋转

(2)3D旋转

​ rotateX():函数指定一个元素围绕X轴旋转,旋转的量被定义为指定的角度;如果值为正值,元素围绕X轴顺时针旋转;反之,如果值为负值,元素围绕X轴逆时针旋转。

​ rotateY():函数指定一个元素围绕Y轴旋转,旋转的量被定义为指定的角度;如果值为正值,元素围绕Y轴顺时针旋转;反之,如果值为负值,元素围绕Y轴逆时针旋转。

​ rotateZ()函数和其他两个函数功能一样的,区别在于rotateZ()函数指定一个元素围绕Z轴旋转。

​ rotate3d(x,y,z,a)(建议取值0或1)

  • x:是一个0到1之间的数值,主要用来描述元素围绕X轴旋转的矢量值;
  • y:是一个0到1之间的数值,主要用来描述元素围绕Y轴旋转的矢量值;
  • z:是一个0到1之间的数值,主要用来描述元素围绕Z轴旋转的矢量值;
  • a:是一个角度值,主要用来指定元素在3D空间旋转的角度,如果其值为正值,元素顺时针旋转,反之元素逆时针旋转。

3、过渡的持续时间:transition:10s;

4、变形的基点:transform-origin:值1 值2 ;

​ 值1:水平方向 值2:垂直方向

​ 属性值单位:px % left right top bottom center

5、3D场景:transform-style: preserve-3d;

二、构建立方体

1、搭建立方体六个面,并且实现六个面的位移和旋转,同时添加3D场景和过渡时间,实现3D效果

<1>html
在这里插入图片描述

<2>css样式
在这里插入图片描述
鼠标划过css样式
在这里插入图片描述

<3>>实现鼠标划过旋转效果
在这里插入图片描述
在这里插入图片描述

2、同时可以在立方体里面加一个小立方体,代码基本上相同

在这里插入图片描述

易学教程内所有资源均来自网络或用户发布的内容,如有违反法律规定的内容欢迎反馈
该文章没有解决你所遇到的问题?点击提问,说说你的问题,让更多的人一起探讨吧!