一、目标效果

二、预备知识

1.坐标轴

想要实现3D旋转立方体的效果就必须用到了解网页中的坐标轴是怎样的，然后根据坐标轴来旋转图片。与我们平常所见的坐标轴不同，浏览器中的x轴是从左到右的、y轴是从上到下的、z轴是从后到前的。

我们可以通过一些方法来控制图片在坐标轴上面移动。

方法	功能
translateX(x)	沿着 X 轴移动元素。
translateY(y)	沿着 Y 轴移动元素。
translateZ(z)	沿着 Z 轴移动元素。
translate(x,y)	沿着 X 和 Y 轴移动元素。
translate3d(x,y,z)	分别定义沿着三个轴移动的距离

2.旋转动画

实现旋转的立方体我们首先要有一个立方体。制作立方体的过程非常简单，只需要六张图片，两两一组。第一组图片一个沿着最右边，相对y轴旋转-90度；一个沿着最左边，相对y轴旋转90度。第二组图片一个沿着最底边，相对x轴旋转90度；一个沿着最上边，相对x轴旋转-90度。第三组图片一个不动，另一个沿着z轴向后移动一个正方形的边长的距离。这样就一个图片立方体就制作完成了。

img:nth-child(2) {/* 设置旋转边 */transform-origin: right;/* 设置旋转角度 */transform: rotateY(-90deg);
}

实现旋转效果需要用到动画和3D效果。如果对动画还不是很了解的朋友可以参考CSS3-动画_可乐喽的博客-CSDN博客这篇文章，这里只说一下怎么实现3D效果。首先是“perspective”属性，个人理解是这个属性定义了我们看这个元素以及其子元素的视角，其值就是视距，也就是我们的眼睛距离成像的平面的距离。其次是"transform-style"这个属性定义了显示形式，由于我们需要3D效果，所以我们把它定义为“preserve-3d”。最后是“transform-origin”属性，该属性定义旋转的中心点，图像的旋转就是围绕着这个点进行的。

三、代码

 <!DOCTYPE html><html lang="en"><head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>3D立方体</title><style>* {margin: 0;padding: 0;}.box .wrap {width: 300px;height: 300px;margin: 0 auto;}.box {margin: 200px auto;/* 定义视角 */perspective: 1000px;}.wrap {position: relative;width: 100%;height: 100%;/* 3d效果显示 */transform-style: preserve-3d;animation: turn 3s linear infinite;/* 定义旋转的位置 */transform-origin: center center -150px;}img {/* 将图像设置为正方形 */width: 300px;height: 300px;position: absolute;top: 0;left: 0;/* 设置图像的透明度 */opacity: .8;}/* 一个图像沿着最右边 相对y轴旋转-90度 */img:nth-child(2) {transform-origin: right;transform: rotateY(-90deg);}/* 一个图像沿着最左边 相对y轴旋转90度 */img:nth-child(3) {transform-origin: left;transform: rotateY(90deg);}/* 一个图像沿着最底边 相对x轴旋转90度 */img:nth-child(4) {transform-origin: bottom;transform: rotateX(90deg);}/* 一个图像沿着最上边 相对x轴旋转-90度 */img:nth-child(5) {transform-origin: top;transform: rotateX(-90deg);}/* 一个图像沿z轴向后移动300px */img:last-child {transform: translateZ(-300px);}/* 定义旋转动画 */@keyframes turn {from {transform: rotate3d(1, 1, 0, 0deg);}to {transform: rotate3d(1, 1, 0, 360deg);}}</style></head><body><div class="box"><div class="wrap"><img src="https://img2.woyaogexing.com/2022/07/30/0e093e8294fd0c28!400x400.jpg" alt=""><img src="https://img2.woyaogexing.com/2022/07/30/a718129a8cc564d3!400x400.jpg" alt=""><img src="https://img2.woyaogexing.com/2022/07/30/cc2796029e811a52!400x400.jpg" alt=""><img src="https://img2.woyaogexing.com/2022/07/28/6b892a9d495f666b!400x400.jpg" alt=""><img src="https://img2.woyaogexing.com/2022/06/23/c61bcd84592137fa!400x400.jpg" alt=""><img src="https://img2.woyaogexing.com/2022/06/23/940c4e898b4b3c9e!400x400.jpg" alt=""></div></div></body></html>

用HTML+CSS实现旋转的立方体相关推荐

html5css写旋转立方体,css练习-旋转的立方体
1. 建立HTML结构立方体有六个面,分别使用六个div 外面使用wrap容器包裹,作为整体,用来执行旋转动画 2. 整体样式 body { perspective: 1000px; } .wrap ...
如何用css3制作一个旋转的立方体
css3增加的动画效果使得前端制作某些动画更加方便,流畅,如何制作一个最简单的会旋转的立方体呢?话不多说,直接上代码! html代码如下,需要一个大的div包裹六个div作为立方体的六个表面 < ...
纯用CSS来实现3D立方体旋转效果
这次用纯CSS来实现3D立方体旋转效果效果如下(可以想象成一个旋转的立方体) HTML部分首先创建一个ul标签在其ul标签下的6个li标签相当于正方体的6个面 <body>< ...
OpenGL设置透视投影并渲染旋转的立方体
OpenGL设置透视投影并渲染旋转的立方体先上图,再解答. 完整主要的源代码源代码剖析先上图,再解答. 完整主要的源代码 #include <GLXW/glxw.h> #includ ...
HTML+CSS制作旋转的loading效果
HTML+CSS制作旋转的loading效果效果图如下: HTML部分源代码如下: <!DOCTYPE html> <html lang="en">< ...
css实现旋转的小流星动画
效果如下: 完整代码如下 : <!DOCTYPE html> <html lang="en"> <head><meta charset=& ...
用Css3实现旋转的立方体
通过Css3,我们能够创建动画,这可以在许多网页中取代一些JavaScript中复杂的动画效果的写法,下面让我们用css3实现一个旋转的立方体吧. Html部分: 1)先给六个面写一个公共的类:cub ...
js设置css色相旋转_色相旋转颜色方案是否保留了对色盲友好的能力？
js设置css色相旋转 Hue rotation is often an easy way to change the appearance of a plot or figure without t ...
three.js 画一个旋转的立方体
学习交流欢迎加群:789723098,博主会将一些demo整理共享试想一下,如果我们的周围的事物都是静止的,那将是多么无聊的一个世界:同样的,我们创建出的场景如果是静止的,只能满足我们一时的视觉体验 ...

用HTML+CSS实现旋转的立方体