不要把“左上角”说成“left top corner”啊，因为你说反啦

多小伙伴应该在初中的时候学过用英文写信，地址都是要从小写到大的，和中文地址完全反过来。

比如说，中国湖南省长沙市，英语的写法中就会变成Changsha, Hunan province, China。

同样的日期，我们以英式日期和中国日期做对比。在英式日期中，2017年03月21号在英语中会被写成21st March 2017。又是反过来的。

不仅如此，我们本期要学的各种表示位置或方位的词，它也是反过来的哟！让我们来好好总结一下吧！

1. “东北”用英语怎么说？

首先说说我们的东南西北英语怎么说：东East，南South，西West，北North。这4个单英语单词大家应该很熟悉了。

但是东北用英语怎么说呢？西北呢？按照上面的原则都记得一定要把它反过来。

所以如果你要说东北，英语对应：northeast；西北：northwest；西南：southwest；东南：southeast.

来看几个英语例句来巩固一下它们的表达吧。

英语例句：

① Jilin lies to the northeast of Chengdu.

吉林在成都的东北方。

* lie to，to暗含的意思就是我们两个不接壤。

② India lies on the southwest of China.

印度在中国的西南方。

* lie on，on暗含的意思就是我们两个接壤，挨着一个边儿。

2. “左上角”用英语怎么说？

同样的，除了表示东南西北方位的词是倒过来的以外，我们经常说到的“左上角，右上角”在英语中也是反过来的。

如果你把“左上角”翻译成“left top corner”，那你就说反啦！

比如说“右上角”在英语中会“先说上，再说右”！英语表达：

左上角：the top left corner；

左下角：the bottom left corner；

右上角：the top right corner；

右下角：the bottom right corner。

好的，一个老套路我们说几个英语例句总结一下吧。

① 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!

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

本期的内容就说到这里，现在你能不能试着回忆一下，右下角的英语怎么说？

西南的英语又是怎么说呢？赶紧麻溜的，快速反应一下吧。

卡片收一收

【资料大礼包】

1、关注卡片山谷英语头条号，私信发送“Hi”给小编，即可获得500G学习资料！

言：

圣诞节快到了，是不是要给女朋友或者正在追求的妹子一点小惊喜呢，今天这篇博客就分享下前端代码如何实现3D立体动态相册。赶紧学会了，来制作属于我们程序员的浪漫吧！先上效果图，来引起下你们的兴趣。

正文：

一、新建一个index.html的文件，代码如下

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>纯CSS实现鼠标经过3D立体动态展示图片特效代码</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);
	}
}

三、文件的目录结构，把css文件放到css文件夹里，图片放到img文件夹里。

四、图片尺寸不会修改的，可以选择使用美图秀秀网页版很简单

五、容易出现的问题，图片展示不全或展示的方向不对

1.图片尺寸需要修改（解决展示不全的情况）

上图是我的图片文件夹里放的图片，首先01-06编号命名的图片尺寸是100x100px的大小的，1-6编号是400x400px，如果效果想展示最佳，100x100px的图片是以头部特写的照片最好，因为01-06是立体照片内部小正方体的照片，1-6编号是外部正方体的照片。

2.图片的方向需要修改（解决头朝下的问题）

修改的方向如上图展示所示，比如第三张头就应该朝下，否则形成的效果图像会出现头是倒着的情况。

六、放一下动态效果图

总结：

生活虽然总有辛酸，但是我们不应该减少去创造生活的乐趣，不断寻找属于自己的那份快乐，才应该是我们生活的态度。

我自己是一名从事了多年开发的web前端老程序员，目前辞职在做自己的web前端私人定制课程，今年年初我花了一个月整理了一份最适合2019年学习的web前端学习干货，各种框架都有整理，送给每一位前端小伙伴，想要获取的可以关注我的头条号并在后台私信我：前端，即可免费获取。

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

次我们来说一下，HTML网页中的定位，有很多小伙伴一定好奇，为什么我们写的代码都是按顺序罗列的而在网页的展示效果中，我们的各种样式，标签，图片等东西都是出现在网页的各个位置，网页看起来很美观，各种盒模型摆放合理，这是因为在HTML中有定位的能力，今天我们就来学习一下。

position在英语中是位置的意思，而在我们CSS代码中position也是跟位置有关的，position有三个属性值分别为relative（相对定位：相对于自己原来的位置进行定位，但保留自己原来的位置，别的元素无法占用），absolute（绝对定位：相对于有定位的父级进行定位，如果没有则相对于文档进行定位，定位会脱离文档，不保留原来的位置，会和原来的文档不在一个层），fixed（位置定位：他的位置不会随着滑轮的滚动而改变较常见于弹窗广告，他也会脱离文档流）。

我们说完了position，接下来我们就说说他是怎么进行定位的，我们有left，top，right，bottom，五个属性分别对应距左边，距上边，距右边，距下边，大家注意到我在每个方向前都加了个距字，我们所做的定位是距各个方向的距离而不是移动，例：left:200px，是向右移动200像素，他的意思是距离左边增加200像素。在我们实际的编程中一般都不常用bottom，我们知道，滑轮是可以一直往下滑的，所以我们相对于底部定位的话就很困难。

我们来通过代码和结果来看一下：

没有定位的样式

加了relative

加了relative的结果

上面这个结果图看着比例不太对是因为作者截图没截好[捂脸]

我们可以看出猫图片并没有移动，而是给兔子图片留着位置。

加了absolute

加了absolute的结果

这个结果我们可以看出猫图片向前移动了，并没有保留兔子图片原来的位置

加了fixed

代码中的<br>是为了使滑轮可以滑动，以便更好的展示效果。

用了fixed的效果展示。

以上的代码样式只对兔子图片起作用，我没有给猫添加任何样式，猫图片只是作为参照物。

在线咨询

上一篇：HTML入门
下一篇：JavaScript奇技淫巧：防删水印

您的项目需求

*请认真填写需求信息，我们会在24小时内与您取得联系。

整合营销服务商

不要把“左上角”说成“left top corner”啊，因为你说反啦

1. “东北”用英语怎么说？

2. “左上角”用英语怎么说？

卡片收一收

您的项目需求