css实现3D魔方效果

效果展示

index.css

*{margin: 0;padding: 0;
}
body{display: flex;justify-content: center;align-items: center;width: 100%;height: 100vh;background: radial-gradient(rgb(243, 210, 252) 90%,rgb(249, 73, 240));
}
.container{position: relative;width: 398px;height: 398px;transform-style: preserve-3d;animation: animate 5s linear alternate infinite;
}
.container div{position: absolute;width: 100%;height: 100%;opacity: 0.8;
}
.container div:nth-child(1){transform: translateZ(199px);
}
.container div:nth-child(2){transform:rotateY(180deg) translateZ(199px);
}
.container div:nth-child(3){transform: rotateY(-90deg) translateZ(199px);
}
.container div:nth-child(4){transform: rotateY(90deg) translateZ(199px);
}
.container div:nth-child(5){transform: rotateX(90deg) translateZ(199px);
}
.container div:nth-child(6){transform: rotateX(-90deg) translateZ(199px);
}@keyframes animate {0%,5%{transform: rotateY(90deg);}20%,25%{transform: rotateY(180deg);}40%,45%{transform: rotateY(270deg);}60%,65%{transform: rotateY(0deg);}80%,85%{transform: rotateX(90deg);}95%,100%{transform: rotateX(-90deg);}
}

index.html

<!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><link rel="stylesheet" href="./index.css">
</head>
<body><div class="container"><div class="self"><img src="./img/1.jpg" alt=""></div><div class="self"><img src="./img/2.jpg" alt=""></div><div class="self"><img src="./img/3.jpg" alt=""></div><div class="self"><img src="./img/4.jpg" alt=""></div><div class="self"><img src="./img/5.jpg" alt=""></div><div class="self"><img src="./img/6.jpg" alt=""></div></div></body>
</html>

css实现3D魔方效果相关推荐

html css3d效果,html，css的3D变形
html,css的3D变形: 首先要了解一个概念:景深perspective 景深可以营造一个近大远小的效果,在IE.opera浏览器目前不支持这个属性,在safari和chrome里,要用-webk ...
php3d按钮,CSS实现3D按钮效果
这次给大家带来CSS实现3D按钮效果,CSS实现3D按钮效果的注意事项有哪些,下面就是实战案例,一起来看一下. css巧妙利用了box-shadow来实现3D物体的立体感,当按钮按下的时候再去修改bo ...
HTML+CSS制作3D旋转相册
一.HTML+CSS制作3D旋转相册哈哈哈,放寒假啦!又可以好好闭关修炼了,最近,在抽屉里无意中翻到了自己上小学时的照片,太可爱啦,照片我就不贴出来了,于是,我就想着用所学的知识,做一个3D旋转相册 ...
HTML+CSS制作3D步数统计界面
HTML+CSS制作3D步数统计界面效果图如下: HTML部分源代码如下: <!DOCTYPE html> <html lang="en"><hea ...
css动画-3d旋转盒子
css动画-3d旋转盒子效果图: 思路: 1.一个容器,装6个子容器放6张图(我是采用的ul列表) <ul class="container"><li id=& ...
php立方体相册源码,纯CSS实现3D的代码（正方体、动态立体图片册、平面的星空）...
本篇文章所说的内容是纯CSS实现3D的代码(正方体.动态立体图片册.平面的星空),代码都非常详细,有需要的朋友可以看一下. 一.正方体我认为正方体可以算是3D图像的基础吧,首先正方体是由六个相同的面 ...
利用css制作3D照片墙
利用css制作3D照片墙 <!doctype html> <html> <head> <meta charset="utf-8"> ...
html5实现立体照片墙效果,利用css制作3D照片墙效果
利用css制作3D照片墙,具体代码如下所示: 无标题文档以上代码是准备工作,在html代码的body主体中放了一个div,里面包着你想要显示在照片墙上的照片,数量可以任意.接着开始着手写样式. bo ...
纯CSS实现3D正方体动画效果
目录前言正文 1.基本架构 2.书写每个div样式 3.为需要产生动画的一面单独设置样式 4.设置鼠标hover效果 5.优化总结前言纯CSS实现3D正方体动画效果,此方法是通过transf ...

css实现3D魔方效果

css实现3D魔方效果相关推荐

最新文章

热门文章