其他分享
首页 > 其他分享> > css3制作立方体

css3制作立方体

作者:互联网

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)

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、同时可以在立方体里面加一个小立方体,代码基本上相同

在这里插入图片描述

标签:css3,围绕,元素,旋转,立方体,translate,制作,3D
来源: https://blog.csdn.net/xiaodebufuyan/article/details/104760439