纯css实现3D立体六面体照片墙

思路： 1.创建一个div外包裹容器，居中，设置相对定位

2.包裹容器中添加6个div，设置绝对定位，此时6个div重合。

3.将六面体的六个面排好，（左边两个div重叠，中间两个div重叠，右边两div重叠）

4.中间重叠的两块是六面体的前、后两面。前面的只需让其沿z轴一到移动（边长*根号3）px，后面的div需要先绕x旋转180deg，在沿z轴移动-(边长*根号3)px

5.左侧后面的面先沿z轴移动-(边长*根号3)px，是指旋转的原点transform-origin：0% 0%，再绕x轴旋转-120deg

6.左侧前面的面先沿z轴移动(边长*根号3)px，是指旋转的原点transform-origin：0% 0%，再绕x轴旋转120deg

7.右侧后面的面先沿z轴移动-(边长*根号3)px，是指旋转的原点transform-origin：100% 0%，再绕x轴旋转-120deg

8.左侧前面的面先沿z轴移动(边长*根号3)px，是指旋转的原点transform-origin：100% 0%，再绕x轴旋转120deg

9.添加图片就可以啦~

10.设置动画让其旋转起来就可以啦~

<!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>Document</title><style>*{margin: 0;padding: 0;}html{perspective: 800px;}body{background-color: black;}img{width: 100%;position: absolute;top: 0;bottom: 0;margin: auto;}.outer{position: relative;width: 600px;height: 450px;margin: 100px auto;transform-style: preserve-3d;transform: rotateX(30deg);  animation: rot 12s linear  infinite;}.outer>div{width: 400px;position: absolute;top: 0;left: 0;bottom: 0;right: 0;margin: auto;}.outer>div:nth-child(1){transform: rotateY(0) translateZ(346.4PX);}.outer>div:nth-child(2){transform: rotateY(180deg) translateZ(346.4px);}.outer>div:nth-child(3){transform:translateX(-400px);transform-origin: 0% 0%;transform: translateZ(346.4px)  rotateY(120deg) ;}.outer>div:nth-child(4){transform:translateX(-400px);transform-origin: 0% 0%;transform: translateZ(-346.4px) rotateY(-120deg) ;}.outer>div:nth-child(5){transform:translateX(400px);transform-origin: 100% 0%;transform: translateZ(-346.4px) rotateY(120deg) ;}.outer>div:nth-child(6){transform:translateX(400px);transform-origin: 100% 0%;transform: translateZ(346.4px) rotateY(-120deg) ;}@keyframes rot{from{transform: rotateY(0deg) rotatex(-30deg);}to{transform: rotateY(360deg) rotatex(30deg);}}</style>
</head>
<body><div class="outer"><div><img src="./1.jpeg" alt=""></div><div><img src="./2.jpeg" alt=""></div><div> <img src="./3.jpeg" alt=""></div><div> <img src="./4.jpg" alt=""></div><div><img src="./5.jpg" alt=""></div><div><img src="./6.jpg" alt=""></div></div></body>
</html>

纯css实现3D立体六面体照片墙相关推荐

php立方体相册源码,纯CSS实现3D的代码（正方体、动态立体图片册、平面的星空）...
本篇文章所说的内容是纯CSS实现3D的代码(正方体.动态立体图片册.平面的星空),代码都非常详细,有需要的朋友可以看一下. 一.正方体我认为正方体可以算是3D图像的基础吧,首先正方体是由六个相同的面 ...
纯CSS实现3D正方体动画效果
目录前言正文 1.基本架构 2.书写每个div样式 3.为需要产生动画的一面单独设置样式 4.设置鼠标hover效果 5.优化总结前言纯CSS实现3D正方体动画效果,此方法是通过transf ...
纯CSS制作3D旋转风车动画效果
效果图展示 HTML源码: <!DOCTYPE html> <html xmlns="http://www.w3.org/1999/xhtml"&g ...
纯css实现3D立方体
关注公众号,每天都能领外卖红包纯css实现3D立方体特效,通过3D旋转和平移原理实现,话不多说直接贴代码 <html> <head><style type=&qu ...
css书本效果,如何使用纯CSS实现3D书本效果
如何使用纯CSS实现3D书本效果发布时间:2020-07-30 10:27:15 来源:亿速云阅读:59 作者:Leah 这期内容当中小编将会给大家带来有关如何使用纯CSS实现3D书本效果,文章内 ...
CSS实现3D立体动态相册代码!
1.效果展示你们喜欢玩的3D立体动态相册都在这里了,有手就行哦. 2.创建好路径创建好一个文件夹,css目录下面创建好css文件,img目录下放好需要展示的图片,创建好html文件,具体如图所示: ...
史上最详细纯CSS打造3D文本滚动
昨天看见了一篇文章关于用纯CSS实现文本滚动,在这里跟大家分享一下. 首先把效果图贴给大家根据效果图我们很容易发现肯定是要用到3D转换的,如果对这个还不是很了解的可以先看看下面的文章 http:// ...
android 3d魔方代码,css实现3d立体魔方的示例代码
今天来做一个简单的3d魔方先看效果图吧!把这个看会了,一些网上的3d的相册你就都会了一.我们先准备好们的html代码 3d立体魔方好了我们html代码就准备完成了,首先我们要有一个3d的思维,在 ...
css制作3D立体旋转效果
通过纯css制作出3D旋转效果,以展示中国部分知名公司为例: 浏览器实现结果: 6个名片都具有两面,一面图片,一面文字,当鼠标放在图片上时,就会3D旋转成文字的一面. 代码: <!DOCTYPE ...
纯CSS实现3D按钮效果
今天分享一个用纯CSS实现的3D按钮. css巧妙利用了box-shadow来实现3D物体的立体感,当按钮按下的时候再去修改box-shadow和top值. 让人感觉有一种按钮被按下的感觉.css代码 ...

纯css实现3D立体六面体照片墙

纯css实现3D立体六面体照片墙相关推荐

最新文章

热门文章