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

以你之姓@ 2024-04-17 23:27 76阅读 0赞

##### 功能&&效果图： #####

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L0Jvb2tzdG9yZVNwaXJpdA_size_16_color_FFFFFF_t_70]

> 本案例是旋转的立方体，整体由两个立方体组成。外面有一个大的正方体，内部有一个小的正方体，整个正方体一开始呈闭合状态，并自由旋转，当鼠标悬浮时，大小正方体展开。

###### 结构部分： ######

<body>
    		<div class="box">
    			<div><img src="img/01.png" alt="" /></div>
    			<div><img src="img/02.png" alt="" /></div>
    			<div><img src="img/03.png"/></div>
    			<div><img src="img/04.png"/></div>
    			<div><img src="img/05.png"/></div>
    			<div><img src="img/06.png"/></div>
    			<div class="d1"><img src="img/bg01.jpg"/></div>
    			<div class="d1"><img src="img/bg1.jpg"/></div>
    			<div class="d1"><img src="img/bg2.jpg"/></div>
    			<div class="d1"><img src="img/bg3.jpg"/></div>
    			<div class="d1"><img src="img/bg4.jpg"/></div>
    			<div class="d1"><img src="img/bg5.jpg"/></div>
    		</div>
    	</body>

> 结构部分主要分为两个部分，一个是外部的大立方体（d1），一个是内部的小立方体

<style type="text/css">
    			body {
    				background: url(img/b.jpg);
    				background-size: cover;
    			}
    			.box {  //给box设置动画
    				transform: rotateZ(-45deg);
    				border: 1px solid red;
    				margin: 280px auto;
    				width: 300px;
    				height: 300px;
    				position: relative;
    				animation-duration:5s; //设置周期时间
    				animation-name:name ; //动画关键帧名称
    				animation-timing-function:linear ; //设置运动曲线
    				animation-iteration-count: infinite; 播放次数：无限循环
    				transition: all 1s;
    				transform-style: preserve-3d; //开启3D，以3D效果显示
    			}
    			.box div {
    				margin: 50px 0 0 50px;
    				transition: all 1s;
    				height: 200px;
    				width: 200px;
    				position: absolute;
    				opacity: .5;
    				/*border-radius: 50%;*/
    			}
    			img {
    				width: 200px;
    				height: 200px;
    			}
    			.d1 img {
    				width: 400px;
    				height: 400px;
    			}
    			@keyframes name{//动画的效果，以各个轴为基准旋转360度
    				from{transform: rotateY(0deg) rotateX(0deg) rotateZ(0deg)}
    				to{transform: rotateY(360deg) rotateX(360deg) rotateZ(360deg)}
    			}
    			.box .d1 {
    				width: 400px;
    				height:400px;
    				background-color: darkgray;
    				left: -50px;
    				top: -50px;
    				margin: 0;
    				padding: 0;
    				opacity: 1;
    				border: 1px solid red;
    			}
    			
    			//设置小盒子每个面离原点(z轴距离)100px，并且每个面做一定的旋转，围成一个正方体
    			.box div:nth-child(1) {
    				background-color: skyblue;
    				transform: translateZ(100px); 
    			}
    			.box div:nth-child(2) {
    				transform: rotateY(90deg) translateZ(100px);
    				background-color: red;
    			}
    			.box div:nth-child(3) {
    				transform: rotateY(90deg) translateZ(-100px);
    				background-color: yellow;
    			}
    			.box div:nth-child(4) {
    				transform: rotateX(90deg) translateZ(100px);
    				background-color: pink;
    			}
    			.box div:nth-child(5) {
    				transform: rotateX(90deg) translateZ(-100px);
    				background-color: orange;
    			}
    			.box div:nth-child(6) {
    				transform: translateZ(-100px);
    				background-color: blue;
    			}
    			
    			
    			
    			//设置鼠标悬浮时，小盒子的变化：
    			  //每个面离原点的距离变为150px，每个面就不会挨在一起，有一定的距离
    			.box:hover div:nth-child(1) {
    				transform: translateZ(150px);
    			}
    			.box:hover div:nth-child(2) {
    				transform: rotateY(90deg) translateZ(150px);
    			}
    			.box:hover div:nth-child(3) {
    				transform: rotateY(90deg) translateZ(-150px);
    			}
    			.box:hover div:nth-child(4) {
    				transform: rotateX(90deg) translateZ(150px);
    			}
    			.box:hover div:nth-child(5) {
    				transform: rotateX(90deg) translateZ(-150px);
    			}
    			.box:hover div:nth-child(6) {
    				transform: translateZ(-150px);
    			}
    
    
    			 //设置大盒子每个面离原点(z轴距离)200px，且每个面做一定角度的旋转，围成正方体
    			.box div:nth-last-child(6) {
    				transform: translateZ(200px);
    			}
    			.box div:nth-last-child(5) {
    				transform: rotateY(90deg) translateZ(200px);
    			}
    			.box div:nth-last-child(4) {
    				transform: rotateY(90deg) translateZ(-200px);
    			}
    			.box div:nth-last-child(3) {
    				transform: rotateX(90deg) translateZ(200px);
    			}
    			.box div:nth-last-child(2) {
    				transform: rotateX(90deg) translateZ(-200px);
    			}
    			.box div:nth-last-child(1) {
    				transform: translateZ(-200px);
    			}
    			
    			
    			//设置鼠标悬浮时，大盒子的变化：
    			  //每个面离原点的距离变为300px，每个面就不会挨在一起，有一定的距离，并且每个面的透明度发生改变，
    			  这样就能看到里面的小盒子状态
    			.box:hover div:nth-last-child(6) {
    				opacity: .5;
    				transform: translateZ(300px);
    			}
    			.box:hover div:nth-last-child(5) {
    				opacity: .5;
    				transform: rotateY(90deg) translateZ(300px);
    			}
    			.box:hover div:nth-last-child(4) {
    				opacity: .5;
    				transform: rotateY(90deg) translateZ(-300px);
    			}
    			.box:hover div:nth-last-child(3) {
    				opacity: .5;
    				transform: rotateX(90deg) translateZ(300px);
    			}
    			.box:hover div:nth-last-child(2) {
    				opacity: .5;
    				transform: rotateX(90deg) translateZ(-300px);
    			}
    			.box:hover div:nth-last-child(1) {
    				opacity: .5;
    				transform: translateZ(-300px);
    			}
    		</style>

##### 结果 #####

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L0Jvb2tzdG9yZVNwaXJpdA_size_16_color_FFFFFF_t_70]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/17/3ed0df4cd1424c6f96e8a37ffd643d66.png

发表评论取消回复

表情：

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

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

相关阅读

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

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

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

相关如何利用CSS制作简易旋转木马效果

最近回顾动画知识的时候，看到了3d相关的知识，想到了当时学CSS 3动画的时候做的一个旋转木马还挺好看的，今天就来说说怎么用CSS3的变形（transform）和动画（anim

约定不等于承诺〃/ 2023年07月11日 08:58/ 0 赞/ 62 阅读

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

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

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

相关送女朋友-css动画制作立方体相册

图片可以换成女朋友照片~ 直接上代码！嵌套立方体相册 <!DOCTYPE html> <html lang="en">

Love The Way You Lie/ 2023年01月09日 15:55/ 0 赞/ 192 阅读

相关如何用CSS3转换、动画制作旋转相册，立方体相册

一、3D转换制作旋转相册 ![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNz

青旅半醒/ 2022年12月28日 14:23/ 0 赞/ 312 阅读

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

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

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

相关纯css流星效果

> `纯css流星效果` <!DOCTYPE html> <html lang="en"> <head> <meta charset=

桃扇骨/ 2022年10月25日 01:26/ 0 赞/ 171 阅读

相关纯CSS3发光线条旋转加载loading效果

[下载地址][Link 1]使用纯CSS3代码实现的发光线条旋转加载动画效果，两条弧形发光彩色线条旋转动画特效。 ![1631277412.png][] dd: [Li

深藏阁楼爱情的钟/ 2022年09月11日 03:11/ 0 赞/ 177 阅读

相关 css立方体制作

思路，六个面重叠在一起，然后旋转平移，到底指定位置 opacity设置元素不透明度，包括图片，背景等 transfrom-style: preserve-3d

àì夳堔傛蜴生んèń/ 2022年09月04日 09:54/ 0 赞/ 214 阅读

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

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

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