不要把“左上角”說(shuō)成“l(fā)eft top corner”啊，因?yàn)槟阏f(shuō)反啦

多小伙伴應(yīng)該在初中的時(shí)候?qū)W過(guò)用英文寫(xiě)信，地址都是要從小寫(xiě)到大的，和中文地址完全反過(guò)來(lái)。

比如說(shuō)，中國(guó)湖南省長(zhǎng)沙市，英語(yǔ)的寫(xiě)法中就會(huì)變成Changsha, Hunan province, China。

同樣的日期，我們以英式日期和中國(guó)日期做對(duì)比。在英式日期中，2017年03月21號(hào)在英語(yǔ)中會(huì)被寫(xiě)成21st March 2017。又是反過(guò)來(lái)的。

不僅如此，我們本期要學(xué)的各種表示位置或方位的詞，它也是反過(guò)來(lái)的喲！讓我們來(lái)好好總結(jié)一下吧！

1. “東北”用英語(yǔ)怎么說(shuō)？

首先說(shuō)說(shuō)我們的東南西北英語(yǔ)怎么說(shuō)：東East，南South，西West，北North。這4個(gè)單英語(yǔ)單詞大家應(yīng)該很熟悉了。

但是東北用英語(yǔ)怎么說(shuō)呢？西北呢？按照上面的原則都記得一定要把它反過(guò)來(lái)。

所以如果你要說(shuō)東北，英語(yǔ)對(duì)應(yīng)：northeast；西北：northwest；西南：southwest；東南：southeast.

來(lái)看幾個(gè)英語(yǔ)例句來(lái)鞏固一下它們的表達(dá)吧。

英語(yǔ)例句：

① Jilin lies to the northeast of Chengdu.

吉林在成都的東北方。

* lie to，to暗含的意思就是我們兩個(gè)不接壤。

② India lies on the southwest of China.

印度在中國(guó)的西南方。

* lie on，on暗含的意思就是我們兩個(gè)接壤，挨著一個(gè)邊兒。

2. “左上角”用英語(yǔ)怎么說(shuō)？

同樣的，除了表示東南西北方位的詞是倒過(guò)來(lái)的以外，我們經(jīng)常說(shuō)到的“左上角，右上角”在英語(yǔ)中也是反過(guò)來(lái)的。

如果你把“左上角”翻譯成“l(fā)eft top corner”，那你就說(shuō)反啦！

比如說(shuō)“右上角”在英語(yǔ)中會(huì)“先說(shuō)上，再說(shuō)右”！英語(yǔ)表達(dá)：

左上角：the top left corner；

左下角：the bottom left corner；

右上角：the top right corner；

右下角：the bottom right corner。

好的，一個(gè)老套路我們說(shuō)幾個(gè)英語(yǔ)例句總結(jié)一下吧。

① I saw a star in the top left corner of the picture.

在圖片的左上角我看到了一顆星星。

② Look at the bottom right corner of the screen, yes! That’s it!

看屏幕的右下角，太棒了！就是它！

本期的內(nèi)容就說(shuō)到這里，現(xiàn)在你能不能試著回憶一下，右下角的英語(yǔ)怎么說(shuō)？

西南的英語(yǔ)又是怎么說(shuō)呢？趕緊麻溜的，快速反應(yīng)一下吧。

卡片收一收

【資料大禮包】

1、關(guān)注卡片山谷英語(yǔ)頭條號(hào)，私信發(fā)送“Hi”給小編，即可獲得500G學(xué)習(xí)資料！

言：

圣誕節(jié)快到了，是不是要給女朋友或者正在追求的妹子一點(diǎn)小驚喜呢，今天這篇博客就分享下前端代碼如何實(shí)現(xiàn)3D立體動(dòng)態(tài)相冊(cè)。趕緊學(xué)會(huì)了，來(lái)制作屬于我們程序員的浪漫吧！先上效果圖，來(lái)引起下你們的興趣。

正文：

一、新建一個(gè)index.html的文件，代碼如下

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>純CSS實(shí)現(xiàn)鼠標(biāo)經(jīng)過(guò)3D立體動(dòng)態(tài)展示圖片特效代碼</title>
<link type="text/css" href="css/style.css" rel="stylesheet" />
</head>
<body>
<div class="box">
	<ul class="minbox">
		<li></li>
		<li></li>
		<li></li>
		<li></li>
		<li></li>
		<li></li>
	</ul>
	<ol class="maxbox">
		<li></li>
		<li></li>
		<li></li>
		<li></li>
		<li></li>
		<li></li>
	</ol>
</div>
</body>
</html>

二、css樣式的代碼

@charset "utf-8";
*{
	margin:0;
	padding:0;
}
body{
	max-width: 100%;
	min-width: 100%;
	height: 100%;
	background-size: cover;
	background-repeat: no-repeat;
	background-attachment: fixed;
	background-size:100% 100%;
	position: absolute;
	margin-left: auto;
	margin-right: auto;
}
li{
	list-style: none;
}
.box{
	width:200px;
	height:200px;
	background-size: cover;
	background-repeat: no-repeat;
	background-attachment: fixed;
	background-size:100% 100%;
	position: absolute;
	margin-left: 42%;
	margin-top: 22%;
	-webkit-transform-style:preserve-3d;
	-webkit-transform:rotateX(13deg);
	-webkit-animation:move 5s linear infinite;
}
.minbox{
	width:100px;
	height:100px;
	position: absolute;
	left:50px;
	top:30px;
	-webkit-transform-style:preserve-3d;
}
.minbox li{
	width:100px;
	height:100px;
	position: absolute;
	left:0;
	top:0;
}
.minbox li:nth-child(1){
	background: url(../img/01.png) no-repeat 0 0;
	-webkit-transform:translateZ(50px);
}
.minbox li:nth-child(2){
	background: url(../img/02.png) no-repeat 0 0;
	-webkit-transform:rotateX(180deg) translateZ(50px);
}
.minbox li:nth-child(3){
	background: url(../img/03.png) no-repeat 0 0;
	-webkit-transform:rotateX(-90deg) translateZ(50px);
}
.minbox li:nth-child(4){
	background: url(../img/04.png) no-repeat 0 0;
	-webkit-transform:rotateX(90deg) translateZ(50px);
}
.minbox li:nth-child(5){
	background: url(../img/05.png) no-repeat 0 0;
	-webkit-transform:rotateY(-90deg) translateZ(50px);
}
.minbox li:nth-child(6){
	background: url(../img/06.png) no-repeat 0 0;
	-webkit-transform:rotateY(90deg) translateZ(50px);
}
.maxbox li:nth-child(1){
	background: url(../img/1.png) no-repeat 0 0;
	-webkit-transform:translateZ(50px);
}
.maxbox li:nth-child(2){
	background: url(../img/2.png) no-repeat 0 0;
	-webkit-transform:translateZ(50px);
}
.maxbox li:nth-child(3){
	background: url(../img/3.png) no-repeat 0 0;
	-webkit-transform:rotateX(-90deg) translateZ(50px);
}
.maxbox li:nth-child(4){
	background: url(../img/4.png) no-repeat 0 0;
	-webkit-transform:rotateX(90deg) translateZ(50px);
}
.maxbox li:nth-child(5){
	background: url(../img/5.png) no-repeat 0 0;
	-webkit-transform:rotateY(-90deg) translateZ(50px);
}
.maxbox li:nth-child(6){
	background: url(../img/6.png) no-repeat 0 0;
	-webkit-transform:rotateY(90deg) translateZ(50px);
}
.maxbox{
	width: 800px;
	height: 400px;
	position: absolute;
	left: 0;
	top: -20px;
	-webkit-transform-style: preserve-3d;
	
}
.maxbox li{
	width: 200px;
	height: 200px;
	background: #fff;
	border:1px solid #ccc;
	position: absolute;
	left: 0;
	top: 0;
	opacity: 0.2;
	-webkit-transition:all 1s ease;
}
.maxbox li:nth-child(1){
	-webkit-transform:translateZ(100px);
}
.maxbox li:nth-child(2){
	-webkit-transform:rotateX(180deg) translateZ(100px);
}
.maxbox li:nth-child(3){
	-webkit-transform:rotateX(-90deg) translateZ(100px);
}
.maxbox li:nth-child(4){
	-webkit-transform:rotateX(90deg) translateZ(100px);
}
.maxbox li:nth-child(5){
	-webkit-transform:rotateY(-90deg) translateZ(100px);
}
.maxbox li:nth-child(6){
	-webkit-transform:rotateY(90deg) translateZ(100px);
}
.box:hover ol li:nth-child(1){
	-webkit-transform:translateZ(300px);
	width: 400px;
	height: 400px;
	opacity: 0.8;
	left: -100px;
	top: -100px;
}
.box:hover ol li:nth-child(2){
	-webkit-transform:rotateX(180deg) translateZ(300px);
	width: 400px;
	height: 400px;
	opacity: 0.8;
	left: -100px;
	top: -100px;
}
.box:hover ol li:nth-child(3){
	-webkit-transform:rotateX(-90deg) translateZ(300px);
	width: 400px;
	height: 400px;
	opacity: 0.8;
	left: -100px;
	top: -100px;
}
.box:hover ol li:nth-child(4){
	-webkit-transform:rotateX(90deg) translateZ(300px);
	width: 400px;
	height: 400px;
	opacity: 0.8;
	left: -100px;
	top: -100px;
}
.box:hover ol li:nth-child(5){
	-webkit-transform:rotateY(-90deg) translateZ(300px);
	width: 400px;
	height: 400px;
	opacity: 0.8;
	left: -100px;
	top: -100px;
}
.box:hover ol li:nth-child(6){
	-webkit-transform:rotateY(90deg) translateZ(300px);
	width: 400px;
	height: 400px;
	opacity: 0.8;
	left: -100px;
	top: -100px;
}
@keyframes move{
	0%{
		-webkit-transform: rotateX(13deg) rotateY(0deg);
	}
	100%{
		-webkit-transform:rotateX(13deg) rotateY(360deg);
	}
}

三、文件的目錄結(jié)構(gòu)，把css文件放到css文件夾里，圖片放到img文件夾里。

四、圖片尺寸不會(huì)修改的，可以選擇使用美圖秀秀網(wǎng)頁(yè)版很簡(jiǎn)單

五、容易出現(xiàn)的問(wèn)題，圖片展示不全或展示的方向不對(duì)

1.圖片尺寸需要修改（解決展示不全的情況）

上圖是我的圖片文件夾里放的圖片，首先01-06編號(hào)命名的圖片尺寸是100x100px的大小的，1-6編號(hào)是400x400px，如果效果想展示最佳，100x100px的圖片是以頭部特寫(xiě)的照片最好，因?yàn)?1-06是立體照片內(nèi)部小正方體的照片，1-6編號(hào)是外部正方體的照片。

2.圖片的方向需要修改（解決頭朝下的問(wèn)題）

修改的方向如上圖展示所示，比如第三張頭就應(yīng)該朝下，否則形成的效果圖像會(huì)出現(xiàn)頭是倒著的情況。

六、放一下動(dòng)態(tài)效果圖

總結(jié)：

生活雖然總有辛酸，但是我們不應(yīng)該減少去創(chuàng)造生活的樂(lè)趣，不斷尋找屬于自己的那份快樂(lè)，才應(yīng)該是我們生活的態(tài)度。

我自己是一名從事了多年開(kāi)發(fā)的web前端老程序員，目前辭職在做自己的web前端私人定制課程，今年年初我花了一個(gè)月整理了一份最適合2019年學(xué)習(xí)的web前端學(xué)習(xí)干貨，各種框架都有整理，送給每一位前端小伙伴，想要獲取的可以關(guān)注我的頭條號(hào)并在后臺(tái)私信我：前端，即可免費(fèi)獲取。

原文鏈接：https://blog.csdn.net/jdk_wangtaida/article/details/103253883

次我們來(lái)說(shuō)一下，HTML網(wǎng)頁(yè)中的定位，有很多小伙伴一定好奇，為什么我們寫(xiě)的代碼都是按順序羅列的而在網(wǎng)頁(yè)的展示效果中，我們的各種樣式，標(biāo)簽，圖片等東西都是出現(xiàn)在網(wǎng)頁(yè)的各個(gè)位置，網(wǎng)頁(yè)看起來(lái)很美觀，各種盒模型擺放合理，這是因?yàn)樵贖TML中有定位的能力，今天我們就來(lái)學(xué)習(xí)一下。

position在英語(yǔ)中是位置的意思，而在我們CSS代碼中position也是跟位置有關(guān)的，position有三個(gè)屬性值分別為relative（相對(duì)定位：相對(duì)于自己原來(lái)的位置進(jìn)行定位，但保留自己原來(lái)的位置，別的元素?zé)o法占用），absolute（絕對(duì)定位：相對(duì)于有定位的父級(jí)進(jìn)行定位，如果沒(méi)有則相對(duì)于文檔進(jìn)行定位，定位會(huì)脫離文檔，不保留原來(lái)的位置，會(huì)和原來(lái)的文檔不在一個(gè)層），fixed（位置定位：他的位置不會(huì)隨著滑輪的滾動(dòng)而改變較常見(jiàn)于彈窗廣告，他也會(huì)脫離文檔流）。

我們說(shuō)完了position，接下來(lái)我們就說(shuō)說(shuō)他是怎么進(jìn)行定位的，我們有l(wèi)eft，top，right，bottom，五個(gè)屬性分別對(duì)應(yīng) 距左邊，距上邊，距右邊，距下邊，大家注意到我在每個(gè)方向前都加了個(gè)距字，我們所做的定位是距各個(gè)方向的距離而不是移動(dòng)，例：left:200px，是向右移動(dòng)200像素，他的意思是距離左邊增加200像素。在我們實(shí)際的編程中一般都不常用bottom，我們知道，滑輪是可以一直往下滑的，所以我們相對(duì)于底部定位的話就很困難。

我們來(lái)通過(guò)代碼和結(jié)果來(lái)看一下：

沒(méi)有定位的樣式

加了relative

加了relative的結(jié)果

上面這個(gè)結(jié)果圖看著比例不太對(duì)是因?yàn)樽髡呓貓D沒(méi)截好[捂臉]

我們可以看出貓圖片并沒(méi)有移動(dòng)，而是給兔子圖片留著位置。

加了absolute

加了absolute的結(jié)果

這個(gè)結(jié)果我們可以看出貓圖片向前移動(dòng)了，并沒(méi)有保留兔子圖片原來(lái)的位置

加了fixed

代碼中的<br>是為了使滑輪可以滑動(dòng)，以便更好的展示效果。

用了fixed的效果展示。

以上的代碼樣式只對(duì)兔子圖片起作用，我沒(méi)有給貓?zhí)砑尤魏螛邮剑垐D片只是作為參照物。

在線咨詢

上一篇：HTML入門(mén)
下一篇：JavaScript奇技淫巧：防刪水印

您的項(xiàng)目需求

*請(qǐng)認(rèn)真填寫(xiě)需求信息，我們會(huì)在24小時(shí)內(nèi)與您取得聯(lián)系。

整合營(yíng)銷(xiāo)服務(wù)商

不要把“左上角”說(shuō)成“l(fā)eft top corner”啊，因?yàn)槟阏f(shuō)反啦

1. “東北”用英語(yǔ)怎么說(shuō)？

2. “左上角”用英語(yǔ)怎么說(shuō)？

卡片收一收

您的項(xiàng)目需求