520情人節到了，作爲程序猿的我用代碼給女朋友送了一個禮物「可以拿去送給自己喜歡的人」

寫在前面：我是「揚帆向海」，這個暱稱來源於我的名字以及女朋友的名字。我熱愛技術、熱愛開源、熱愛編程。技術是開源的、知識是共享的。

這博客是對自己學習的一點點總結及記錄，如果您對 Java、算法感興趣，可以關注我的動態，我們一起學習。

用知識改變命運，讓我們的家人過上更好的生活。

文章目錄

四、完整代碼

五、源代碼獲取

誰說我們程序猿不浪漫，馬上要到520情人節了。當你在爲女朋友買什麼禮物犯愁的時候，不妨花點時間給她送個別樣的禮物。更能體現你的真心，何樂而不爲了？

一、效果展示

首先看一下效果，由於無法傳視頻，這裏只使用動圖演示，就聽不到美妙的音樂了。

如果不想看製作過程，可以直接拉到最後去看完整代碼就可以了。

二、知識儲備

要做3D立方體，首先要清楚幾個面

x軸平行，y軸垂直，z軸指向正對屏幕。z軸的零點就是屏幕所在的平面。

其中用到幾個屬性：

rotateX()
通過 rotateX() 屬性，可以使元素圍繞 X 軸以指定的度數進行旋轉。
rotateY()
通過 rotateY() 屬性，可以使元素圍繞 Y 軸以指定的度數進行旋轉。
rotateZ()
通過 rotateZ() 屬性，可以使元素圍繞 Z 軸以指定的度數進行旋轉。
transform-style
通過transform-style屬性，可以指定嵌套元素如何在3D空間中呈現
值：flat值爲默認值，表示所有子元素在2D平面呈現。preserve-3d表示所有子元素在3D空間中呈現。
translateZ()
通過.translateZ()屬性，可以使元素沿Z軸平移
注意：只有在transform-style:preserve-3d情況下，才起作用。
opacity
規定不透明度。從 0.0 （完全透明）到 1.0（完全不透明）。

三、畫立方體

這個立方體首先是包裹在一個 div 裏, 有上下前後左右六個面組成。

1. 編寫HTML代碼

用6個div表示六個面

html代碼

<div class="cube">
    <!-- 外層立方體 -->
    <div class="outer-cube">
        <div class="outer-top">1</div>
        <div class="outer-bottom">2</div>
        <div class="outer-front">3</div>
        <div class="outer-back">4</div>
        <div class="outer-left">5</div>
        <div class="outer-right">6</div>
    </div>
    
    <!-- 內層立方體 -->
    <div class="inner-cube">
        <div class="inner-top"></div>
        <div class="inner-bottom"> </div>
        <div class="inner-front"></div>
        <div class="inner-back"></div>
        <div class="inner-left"></div>
        <div class="inner-right"></div>
    </div>
</div>

2. 編寫CSS代碼

首先在.cube 裏設置寬高，讓整體居中。不可省略的有定位，目的是爲了讓每個小盒子疊在一起，方便後來旋轉及平移操作，之後就是創造3d空間

* {
     margin: 0px;
     padding: 0px;
 }

html {
    overflow: hidden;
    height: 100%;
}

.cube {
    position: relative;
    margin: 0px auto;
    margin-top: 9%;
    margin-left: 42%;
    width: 200px;
    height: 200px;
}

2.1 外層立方體樣式

.outer-cube .outer-top,
.outer-cube .outer-bottom,
.outer-cube .outer-right,
.outer-cube .outer-left,
.outer-cube .outer-front,
.outer-cube .outer-back {
    position: absolute;
    top: 0;
    left: 0;
    width: 200px;
    height: 200px;
    font-size: 30px;
    border: 1px solid red;
    opacity: 0.3; 
}

2.2 先做上面的一個面

.outer-top {
    background-color: rgb(236, 32, 17);
}

2.2 在立方體容器中創造3d效果

.cube {
    /* 創造3D效果 */
    transform-style: preserve-3d;
    /* 顯示立體效果 */
    transform: rotateX(-30deg) rotateY(57deg);
}

2.3 旋轉畫好的面

原來的位置是正對着我們的，需要讓正對我們的面跑到上面去，方法是：以X軸向上旋轉90度，座標系也跟着X軸發生了變化，此時Z軸是向上的，再向Z軸平移100px。

.outer-top {
    background-color: rgb(236, 32, 17);
    transform: rotateX(90deg) translateZ(100px);
}

2.4 完成其它幾個面的製作

.outer-bottom {
    background-color: rgb(0, 255, 13);
    transform: rotateX(-90deg) translateZ(100px);
}

.outer-front {
    background-color: blue;
    transform: rotateY(0deg) translateZ(100px);
}

.outer-back {
    background-color:rgb(231, 228, 28);
    transform: translateZ(-100px) rotateY(180deg);
}

.outer-left {
    background-color: rgb(0, 124, 128);
    transform: rotateY(90deg) translateZ(100px);
}

.outer-right {
    background-color: rgb(255, 0, 221);
    transform: rotateY(-90deg) translateZ(100px);
}

2.5 繪製嵌套的內層立方體

.inner-cube>div {
    width: 130px;
    height: 130px;
    position: absolute;
    top: 35px;
    left: 35px;
}

.inner-top {
    background-color: deepskyblue;
    transform: rotateX(90deg) translateZ(65px);
}

.inner-bottom {
    background-color: deepskyblue;
    transform: rotateX(-90deg) translateZ(65px);
}

.inner-front {
    background-color: deepskyblue;
    transform: rotateY(0deg) translateZ(65px);
}

.inner-back {
    background-color: deepskyblue;
    transform: translateZ(-65px) rotateY(180deg);
}

.inner-left {
    background-color: deepskyblue;
    transform: rotateY(90deg) translateZ(65px);
}

.inner-right {
    background-color: deepskyblue;
    transform: rotateY(-90deg) translateZ(65px);
}

2.6 使立方體旋轉起來

.cube {
    animation: rotate 15s infinite;
}

.cube .outer-cube, .cube .inner-cube {
    transform-style: preserve-3d;
}

/* 旋轉 */
@keyframes rotate {
    from {
        transform: rotateX(0deg) rotateY(0deg);
    }

    to {
        transform: rotateX(360deg) rotateY(360deg);
    }
}

2.7 添加鼠標移入後的效果

.cube:hover .outer-top {
    right: -70px;
    bottom: -70px;
    width: 200px;
    height: 200px;
    opacity: 0.8;
    transform: rotateX(90deg) translateZ(200px);
}

.cube:hover .outer-bottom {
    right: -70px;
    bottom: -70px;
    width: 200px;
    height: 200px;
    opacity: 0.8;
    transform: rotateX(-90deg) translateZ(200px);
}

.cube:hover .outer-front {
    right: -70px;
    bottom: -70px;
    width: 200px;
    height: 200px;
    opacity: 0.8;
    transform: rotateY(0deg) translateZ(200px);
}

.cube:hover .outer-back {
    right: -70px;
    bottom: -70px;
    width: 200px;
    height: 200px;
    opacity: 0.8;
    transform: translateZ(-200px) rotateY(180deg);
}

.cube:hover .outer-left {
    right: -70px;
    bottom: -70px;
    width: 200px;
    height: 200px;
    opacity: 0.8;
    transform: rotateY(90deg) translateZ(200px);
}

.cube:hover .outer-right {
    right: -70px;
    bottom: -70px;
    width: 200px;
    height: 200px;
    opacity: 0.8;
    transform: rotateY(-90deg) translateZ(200px);
}

四、完整代碼

1. html代碼

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=div, initial-scale=1.0">
<title>Document</title>
<link rel="stylesheet" href="./css/program.css">
</head>
<body>
<div class="title">
        3D立方體旋轉
</div>
<audio controls="controls" autoplay="autoplay"><source src="./video/love.mp3" type="audio/mpeg"/>
		Your browser does not support the audio element.
	</audio>
<div class="cube">
	<!-- 外層立方體 -->
	<div class="outer-cube">
		<div class="outer-top">
			<img src="images/1.jpg"/>
		</div>
		<div class="outer-bottom">
			<img src="images/2.jpg"/>
		</div>
		<div class="outer-front">
			<img src="images/3.jpg"/>
		</div>
		<div class="outer-back">
			<img src="images/4.jpg"/>
		</div>
		<div class="outer-left">
			<img src="images/5.jpg"/>
		</div>
		<div class="outer-right">
			<img src="images/6.jpg"/>
		</div>
	</div>
	<!-- 內層立方體 -->
	<div class="inner-cube">
		<div class="inner-top">
			<img src="images/01.jpg"/>
		</div>
		<div class="inner-bottom">
			<img src="images/02.jpg"/>
		</div>
		<div class="inner-front">
			<img src="images/03.jpg"/>
		</div>
		<div class="inner-back">
			<img src="images/04.jpg"/>
		</div>
		<div class="inner-left">
			<img src="images/05.jpg"/>
		</div>
		<div class="inner-right">
			<img src="images/06.jpg"/>
		</div>
	</div>
</div>
<div>
	<div class="message">
		<div class="author">
			揚帆向海製作
		</div>
		<div class="tip">
            溫馨提示：鼠標移入移出立方體，將會顯示效果！
		</div>
	</div>
</div>
</body>
</html>

2. css代碼

* {
    margin: 0px;
    padding: 0px;
}

html {
    overflow: hidden;
    height: 100%;
    background: linear-gradient(rgb(0, 238, 255) 0%, #000 100%);
}

.title {
    color: rgb(255, 0, 200);
    text-align: center;
    text-shadow: 0px 1px 0px #999, 0px 2px 0px #888, 0px 3px 0px #777, 0px 4px 0px #666, 0px 5px 0px #555, 0px 6px 0px #444, 0px 7px 0px #333, 0px 8px 7px #001135;
    font-size: 40px;
}

.cube {
    position: relative;
    margin: 0px auto;
    margin-top: 9%;
    margin-left: 42%;
    width: 200px;
    height: 200px;
    transform: rotateX(-30deg) rotateY(-80deg);
    transform-style: preserve-3d;
    animation: rotate 15s infinite;
}

.cube .outer-cube,
.cube .inner-cube {
    transform-style: preserve-3d;
}

/* 旋轉立方體 */
@keyframes rotate {
    from {
        transform: rotateX(0deg) rotateY(0deg);
    }

    to {
        transform: rotateX(360deg) rotateY(360deg);
    }
}

/* 外層立方體樣式 */
.outer-cube .outer-top,
.outer-cube .outer-bottom,
.outer-cube .outer-right,
.outer-cube .outer-left,
.outer-cube .outer-front,
.outer-cube .outer-back {
    position: absolute;
    top: 0;
    left: 0;
    width: 200px;
    height: 200px;
    border: 1px solid #fff;
    opacity: 0.3;
    transition: all .9s;
}

.outer-cube img {
    width: 200px;
    height: 200px;
}


.outer-top {
    transform: rotateX(90deg) translateZ(100px);
}

.outer-bottom {
    transform: rotateX(-90deg) translateZ(100px);
}

.outer-front {
    transform: rotateY(0deg) translateZ(100px);
}

.outer-back {
    transform: translateZ(-100px) rotateY(180deg);
}

.outer-left {
    transform: rotateY(90deg) translateZ(100px);
}

.outer-right {
    transform: rotateY(-90deg) translateZ(100px);
}

/* 嵌套的內層立方體樣式 */
.inner-cube>div {
    position: absolute;
    top: 35px;
    left: 35px;
    width: 130px;
    height: 130px;
}

.inner-cube img {
    width: 130px;
    height: 130px;
}

.inner-top {
    transform: rotateX(90deg) translateZ(65px);
}

.inner-bottom {
    transform: rotateX(-90deg) translateZ(65px);
}

.inner-front {
    transform: rotateY(0deg) translateZ(65px);
}

.inner-back {
    transform: translateZ(-65px) rotateY(180deg);
}

.inner-left {
    transform: rotateY(90deg) translateZ(65px);
}

.inner-right {
    transform: rotateY(-90deg) translateZ(65px);
}

.cube:hover .outer-top {
    right: -70px;
    bottom: -70px;
    opacity: 0.8;
    transform: rotateX(90deg) translateZ(200px);
}

.cube:hover .outer-bottom {
    right: -70px;
    bottom: -70px;
    opacity: 0.8;
    transform: rotateX(-90deg) translateZ(200px);
}

.cube:hover .outer-front {
    right: -70px;
    bottom: -70px;
    opacity: 0.8;
    transform: rotateY(0deg) translateZ(200px);
}

.cube:hover .outer-back {
    right: -70px;
    bottom: -70px;
    opacity: 0.8;
    transform: translateZ(-200px) rotateY(180deg);
}

.cube:hover .outer-left {
    right: -70px;
    bottom: -70px;
    opacity: 0.8;
    transform: rotateY(90deg) translateZ(200px);
}

.cube:hover .outer-right {
    right: -70px;
    bottom: -70px;
    opacity: 0.8;
    transform: rotateY(-90deg) translateZ(200px);
}

.message .author {
    position: absolute;
    right: 50px;
    background-image: -webkit-linear-gradient(left, blue, #66ffff 10%, #cc00ff 20%, #CC00CC 30%, #CCCCFF 40%, #00FFFF 50%, #CCCCFF 60%, #CC00CC 70%, #CC00FF 80%, #66FFFF 90%, blue 100%);
    font-size: 35px;
    -webkit-text-fill-color: transparent;
    -webkit-background-clip: text;
    -webkit-background-size: 200% 100%;
    -webkit-animation: masked-animation 4s linear infinite;
}

@keyframes masked-animation {
    0% {
        background-position: 0 0;
    }

    100% {
        background-position: -100% 0;
    }
}

.message .tip {
    position: absolute;
    right: 0px;
    margin-top: 60px;
    color: red;
    font-size: 18px;
}

五、源代碼獲取

如果需要源碼裏面的所有文件，可以微信關注公衆號： 程序猿編程，回覆 520，即可獲取！

由於水平有限，本博客難免有不足，懇請各位大佬不吝賜教！

520情人節到了，作爲程序猿的我用代碼給女朋友送了一個禮物「可以拿去送給自己喜歡的人」

文章目錄

一、效果展示

二、知識儲備

三、畫立方體

1. 編寫HTML代碼

2. 編寫CSS代碼

2.1 外層立方體樣式

2.2 先做上面的一個面

2.2 在立方體容器中創造3d效果

2.3 旋轉畫好的面

2.4 完成其它幾個面的製作

2.5 繪製嵌套的內層立方體

2.6 使立方體旋轉起來

2.7 添加鼠標移入後的效果

四、完整代碼

1. html代碼

2. css代碼

五、源代碼獲取

這個網絡爬蟲代碼，拿到數據之後如何存到csv文件中去？

即刻放大鏡。跟隨鼠標，屏幕任意位置放大

【面試準備】【SQL】數據庫有哪些約束？

.NET開源強大、易於使用的緩存框架 - FusionCache

面試，有時候是個運氣活

史上最全的SpringBoot學習教程！會不斷更新

Spring Boot 實戰（11）整合MyBatis-Plus

面試官喜歡問的設計模式之觀察者模式

通過四個多月的時間，我成爲了CSDN博客專家

程序員求職面試必會算法！會不斷更新

https://yachay.unat.edu.pe/blog/index.php?comment_area=format_blog&comment_component=blog&comment_co

linux以太網驅動總結