3D 旋转图像预览器立方体是一种效果,其中一组图像出现在旋转 3D 立方体的面上。这种效果可以使用 HTML 和 CSS 来创建。
方法:动画 HTML 对象的最佳方法是使用 CSS @keyframes 并在不同的动画状态设置过渡状态。
HTML代码:
- 创建一个 HTML 文件 (index.html)。
- 将提供所有动画效果的 HTML 中的 CSS 文件链接到我们的 HTML。它位于 标签内。
- 为立方体的每个面创建 6 个 标签,并将您的图像放在每个面上。
HTML
CSS
/* CSS for general styling */ body { display: flex; height: 100vh; justify-content: center; align-items: center; background: #1e6f0a; } .cube { width: 200px; height: 200px; position: relative; transform-style: preserve-3d; animation: rotate 10s linear infinite; } img { width: 100%; height: 100%; object-fit: cover; } .box { width: 100%; height: 100%; position: absolute; top: 0; left: 0; opacity: 0.9; } /* Applying styles to each face */ .box1 { transform: translateZ(100px); } .box2 { transform: rotateY(90deg) translateX(100px); transform-origin: right; } .box3 { transform: rotateY(180deg) translateZ(100px); } .box4 { transform: rotateY(-90deg) translateX(-100px); transform-origin: left; } .box5 { transform: rotateX(-90deg) translateY(-100px); transform-origin: top; } .box6 { transform: rotateX(90deg) translateY(100px); transform-origin: bottom; } /* Animating the elements */ @keyframes rotate { 0%, 100% { transform: rotate(0deg); } 20% { transform: rotateY(90deg) rotateZ(90deg); } 40% { transform: rotateY(180deg) rotateZ(-90deg); } 60% { transform: rotateY(270deg) rotateZ(90deg); } 80% { transform: rotateY(360deg) rotateZ(-90deg); } }
CSS 代码:以下是上述 HTML 代码中使用的“style.css”文件的内容。 CSS 用于为我们的 HTML 页面提供不同类型的动画和效果,使其看起来对所有用户都具有交互性。
- 创建一个 body 类来为整个页面提供通用样式。
- 为立方体的每个面创建 id 和类以提供样式。
- 使用@keyframes 为 HTML 元素设置动画。
CSS
/* CSS for general styling */ body { display: flex; height: 100vh; justify-content: center; align-items: center; background: #1e6f0a; } .cube { width: 200px; height: 200px; position: relative; transform-style: preserve-3d; animation: rotate 10s linear infinite; } img { width: 100%; height: 100%; object-fit: cover; } .box { width: 100%; height: 100%; position: absolute; top: 0; left: 0; opacity: 0.9; } /* Applying styles to each face */ .box1 { transform: translateZ(100px); } .box2 { transform: rotateY(90deg) translateX(100px); transform-origin: right; } .box3 { transform: rotateY(180deg) translateZ(100px); } .box4 { transform: rotateY(-90deg) translateX(-100px); transform-origin: left; } .box5 { transform: rotateX(-90deg) translateY(-100px); transform-origin: top; } .box6 { transform: rotateX(90deg) translateY(100px); transform-origin: bottom; } /* Animating the elements */ @keyframes rotate { 0%, 100% { transform: rotate(0deg); } 20% { transform: rotateY(90deg) rotateZ(90deg); } 40% { transform: rotateY(180deg) rotateZ(-90deg); } 60% { transform: rotateY(270deg) rotateZ(90deg); } 80% { transform: rotateY(360deg) rotateZ(-90deg); } }
输出: