抖音上非常火的3D立方体旋转，纯CSS实现

川长思鸟来 2023-06-24 04:52 192阅读 0赞

一、**效果图展示**  
![在这里插入图片描述][20191220165145460.gif]  
二、**源码**  
1.HTML

<body>
    	<div class="box">
    		<a href="#" class="bigBox"></a>
    		<a href="#" class="bigBox"></a>
    		<a href="#" class="bigBox"></a>
    		<a href="#" class="bigBox"></a>
    		<a href="#" class="bigBox"></a>
    		<a href="#" class="bigBox"></a>
    		<a href="#" class="smallBox"></a>
    		<a href="#" class="smallBox"></a>
    		<a href="#" class="smallBox"></a>
    		<a href="#" class="smallBox"></a>
    		<a href="#" class="smallBox"></a>
    		<a href="#" class="smallBox"></a>
    	</div>
    </body>

2.CSS

<style type="text/css">
    body,p,dl,dd,ul,ol,li,div,h1,h2,h3,h4,h5,h6,form,input,table,tr,td{
    	margin:0;
    	padding:0;
    }
    html,body{
    	height: 100%;
    }
    body{
    	background: linear-gradient(#00ebeb 0%,#008e8e 50%,#000 85%);
    	display: flex;
    	justify-content: center;
    	align-items: center;
    }
    .box{
    	width: 200px;
    	height: 200px;
    	position: relative;
    	transform-style: preserve-3d;
    	animation:lft_ani 10s infinite linear;
    }
    
    .box:hover{
    	animation:lft_ani 10s infinite linear paused;
    }
    
    @keyframes lft_ani{
    	0%{
    		transform:rotateX(0deg) rotateY(0deg);
    	}
    	100%{
    		transform:rotateX(360deg) rotateY(360deg);
    	}
    }
    
    .bigBox{
    	width: 200px;
    	height: 200px;
    	background: greenyellow;
    	border:1px solid black;
    	position: absolute;
    	left: 0;
    	top: 0;
    	opacity: .4;
    	transform-style: preserve-3d;
    	border-radius: 20px;
    	transition: all 1s;
    }
    .bigBox:nth-child(1){
    	transform:translateZ(100px);
    }
    .bigBox:nth-child(2){
    	transform:translateZ(-100px);
    }
    .bigBox:nth-child(3){
    	transform:rotateY(-90deg) translateZ(100px);
    }
    .bigBox:nth-child(4){
    	transform:rotateY(90deg) translateZ(100px);
    }
    .bigBox:nth-child(5){
    	transform:rotateX(90deg) translateZ(100px);
    }
    .bigBox:nth-child(6){
    	transform:rotateX(-90deg) translateZ(100px);
    }
    
    
    .box:hover .bigBox:nth-child(1){
    	transform:translateZ(150px);
    }
    .box:hover .bigBox:nth-child(2){
    	transform:translateZ(-150px);
    }
    .box:hover .bigBox:nth-child(3){
    	transform:rotateY(-90deg) translateZ(150px);
    }
    .box:hover .bigBox:nth-child(4){
    	transform:rotateY(90deg) translateZ(150px);
    }
    .box:hover .bigBox:nth-child(5){
    	transform:rotateX(90deg) translateZ(150px);
    }
    .box:hover .bigBox:nth-child(6){
    	transform:rotateX(-90deg) translateZ(150px);
    }
    
    .smallBox{
    	width: 100px;
    	height: 100px;
    	background: #00ffe4;
    	opacity: .4;
    	position: absolute;
    	left:50px;
    	top: 50px;
    	border:1px solid black;
    	border-radius: 10px;
    }
    
    .smallBox:nth-child(7){
    	transform:translateZ(50px);
    }
    .smallBox:nth-child(8){
    	transform:translateZ(-50px);
    }
    .smallBox:nth-child(9){
    	transform:rotateY(-90deg) translateZ(50px);
    }
    .smallBox:nth-child(10){
    	transform:rotateY(90deg) translateZ(50px);
    }
    .smallBox:nth-child(11){
    	transform:rotateX(90deg) translateZ(50px);
    }
    .smallBox:nth-child(12){
    	transform:rotateX(-90deg) translateZ(50px);
    }
    
    
    </style>

学会了就可以去找女朋友啦

[20191220165145460.gif]: https://img-blog.csdnimg.cn/20191220165145460.gif

发表评论取消回复

表情：

评论列表（有 0 条评论，192人围观）

还没有评论，来说两句吧...

相关阅读

相关实现3D立方体旋转（代码）

D讲解链接：不懂请看下方链接结构代码： [https://blog.csdn.net/l1936441554/article/details/99080122]...

心已赠人/ 2024年04月18日 10:02/ 0 赞/ 87 阅读

相关纯CSS制作-旋转立方体效果

功能&&效果图： ![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9...

以你之姓@/ 2024年04月17日 23:27/ 0 赞/ 76 阅读

相关 3D旋转立方体

效果图; ![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3

谁借莪１个温暖的怀抱￠/ 2023年10月06日 09:11/ 0 赞/ 42 阅读

相关抖音上非常火的3D立方体旋转，纯CSS实现

一、效果图展示 ![在这里插入图片描述][20191220165145460.gif] 二、源码 1.HTML <body> <div clas

川长思鸟来/ 2023年06月24日 04:52/ 0 赞/ 193 阅读

相关这里有美女！！！！抖音上很火的3D立体动态相册的实现(纯CSS)

展示图： ![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0

青旅半醒/ 2023年06月18日 04:56/ 0 赞/ 2 阅读

相关抖音上很火的3D立体动态相册实现代码!

html代码 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8">

布满荆棘的人生/ 2023年06月17日 13:55/ 0 赞/ 29 阅读

相关 HTML5 纯CSS3实现正方体旋转3D效果

实现效果： ![20201127184938505.gif][] 实现代码： <!DOCTYPE html> <html> <head>

Love The Way You Lie/ 2022年12月24日 10:50/ 0 赞/ 276 阅读

相关纯CSS3超酷3D旋转立方体动画特效

这是一款效果非常炫酷的纯[CSS3][] 3D旋转立方体动画特效。该3D立方体使用CSS3 perspective制作，可以在水平方向、垂直方向和平面视角方向旋转，效果相当震撼

绝地灬酷狼/ 2022年08月07日 16:48/ 0 赞/ 319 阅读

相关 css 实现3d旋转

<!DOCTYPE html> <html> <head lang="en"> <meta charset="UTF-8">

柔光的暖阳◎/ 2022年05月28日 12:20/ 0 赞/ 336 阅读

相关抖音上非常火的整人小程序

最近，抖音上的整人小程序深得刷客恩宠。今天小编就为大家献上源代码：直接上效果图 ![70][] 这里，只有她输入“我是猪”，并且按下确定的时候，才能继续...否则

快来打我*/ 2022年05月15日 23:19/ 0 赞/ 414 阅读