CSS转换和JavaScript

The end of the fall semester was particularly disappointing, at least in regards to my second year students. While the usual factors were at play – lack of attention to detail (or lack of any kind of attention at all), tiredness, stress, and rushed, last-minute work – there was something else missing in the final project. I saw a lack of creativity that reflected not just those factors, but a general lack of confidence and fluency in CSS itself.

秋季学期末特别令人失望，至少对于我的二年级学生而言。 尽管通常的因素在起作用-缺乏对细节的关注(或根本没有任何关注)，疲倦，压力和匆忙的最后一刻工作-但最终项目中还缺少其他内容。 我看到缺乏创造力不仅反映了这些因素，而且普遍缺乏对CSS本身的信心和流利程度。

In response, I started the last winter semester in the completely opposite direction from normal, breaking out multicoloured poster boards and glitter pens and glue, and giving the students only one command: “design!”

作为回应，我在上个冬季学期开始时以与往常完全相反的方向开始学习，打破了五彩缤纷的海报板，闪光笔和胶水，只给了学生一个命令：“设计！”

Again, some of the results were disappointing (mostly because of lack of innate talent, or because they were terrified of (or unfamiliar with) holding a pen in their hand and being asked to draw), but less so than the efforts of the previous semester.

As part of the goal to inspire and free up their designs, I showed both classes draft pages of my portfolio website – which were inspired, in turn, by their own portfolio sites, and the entirely justified goading of the 1st years to “show us what you can do.” You can see a mockup of the basic design to the left: essentially, I wanted the large portfolio images to appear like Polaroids in a scrapbook. My goal in sharing this with the class was to emphasize that not everything in web design has to be at rigid right angles, or standard top-left navigation configuration, if the changes were logical, consistent, and warranted.

作为激发和释放他们的设计的目标的一部分，我展示了我的投资组合网站的两个班级草稿页-依次受到他们自己的投资组合网站的启发，以及第一年完全有道理的演说“向我们展示”你可以做什么。” 您可以在左侧看到基本设计的模型：从本质上讲，我希望大型组合图片在剪贴簿中看起来像拍立得一样。 我与全班同学分享的目的是强调，如果更改是合乎逻辑的，一致的且有保证的，则并非网页设计中的所有内容都必须成直角或标准的左上角导航配置。

Of course, some of the students took this a little too literally, and started to design everything on their pages at an angle, but on the whole the experiment seems to have been a success. After SAIT’s reading week, my goal is to critique those designs, then turn them into PhotoShop work, and from there explore the CSS and markup necessary to turn them into full web sites.

当然，一些学生这花了一点， 望文生义，并开始在一定的角度自己的网页设计的一切，但整体上的实验似乎是成功的。 在SAIT阅读一周之后，我的目标是对这些设计进行评论，然后将它们变成PhotoShop作品，然后从那里探索将它们变成完整网站所必需的CSS和标记。

In the meantime, I continued to work on my own portfolio site. It occurred to me very quickly that the technology behind the design was crude and inefficient. For each image, I was forced to go into PhotoShop, rotate the image, stroke the outside to place a border on it, generate a drop shadow, and place “Scotch tape” layers on the corners, before slicing and exporting it. Of course, PhotoShop actions could automate part of this process, but not all – I wanted the rotation to be essentially random, within a range of 4 degrees positive or negative. Naturally, in order to gain the full effect and preserve the background image in the body behind it, the portfolio image had to be exported as a 24-bit PNG, which ramped up file sizes dramatically.

同时，我继续在自己的投资组合网站上工作。 我很快想到设计背后的技术是粗糙且低效的。 对于每张图像，我被迫进入PhotoShop，旋转图像，在外部进行笔触以在其上放置边框，生成阴影，然后在拐角处放置“透明胶带”层，然后进行切片和导出。 当然，PhotoShop动作可以使该过程的一部分自动化，但不是全部–我希望旋转基本上是随机的，在4度正负范围内。 自然地，为了获得完整的效果并将背景图像保留在其后面的主体中，必须将投资组合图像导出为24位PNG ，这会极大地增加文件大小。

Considering the problem, I knew I could generate the photo border easily enough with a CSS border property. I also knew that CSS supported box-shadow and transforms:

考虑到这个问题，我知道我可以使用CSS border属性很容易地生成照片边框。 我也知道CSS支持box-shadow和transforms：

<img src="assets/images/milk-and-cookies.jpg" style="transform:rotate(5deg);">

The visual quality of the rotation in the browser was not as good as doing the same routine in PhotoShop, but it was close enough – and the difference in file size (since I could now save just the portfolio image as a JPEG, without border, Scotch tape or drop-shadow) and workflow efficiency was huge.

浏览器中旋转的视觉效果不如在PhotoShop中执行相同的例程，但是它足够接近-以及文件大小的差异(因为我现在可以将投资组合图片仅保存为JPEG，没有边框，透明胶带或阴影)和工作流程效率非常高。

But I wanted the rotation to be random, to avoid the website looking predictable and staid. Well, it was easy enough to generate a random number in JavaScript, in this case between -4 and 4:

但是我希望轮换是随机的，以避免网站看起来可预测且平稳。 好吧，在JavaScript中生成一个随机数很容易，在这种情况下，介于-4和4之间：

var obj = document.getElementById('biopic'),
	// large image always has an id of "biopic"
min = -4, // maximum negative rotation of the picture
max = 4, // maximum positive rotation of the picture
randomRot = Math.floor(Math.random()*(max-min+1)+min);
	// provides a random number between -4 and 4.

The problem then became applying the transformation to the element via JavaScript, rather than CSS. I could have used a library like JQuery to speed things up, but I was determined to do it myself, in just a few lines of code, and this is what I found:

然后问题就变成了通过JavaScript而不是CSS将转换应用于元素。 我本可以使用像JQuery这样的库来加快处理速度，但是我决心自己完成，只需几行代码，这就是我所发现的：

var rotate = "rotate(" + randomRot + "deg)";
	// formats the rotate amount for the CSS
obj.style.webkitTransform = rotate;
	// transform for Safari
obj.style.MozTransform = rotate;
	// transform for Firefox

Success! I could now watch the portfolio image happily twist from side to side with each page refresh. Then, I had to put the Scotch tape in the corners. This proved to be the challenging part: I needed to find a whole bunch of information about the position of the large portfolio image - it’s height, width, left and right - via JavaScript.

成功！ 现在，每次刷新页面时，我都可以看到投资组合图像从一边到另一边都快乐地扭曲。 然后，我不得不将透明胶带放在角落。 事实证明，这是具有挑战性的部分：我需要通过JavaScript找到有关大型投资组合图片位置的一堆信息-它的高度，宽度，左右。

This was made more complicated by the fact that I did not have the large image absolutely positioned: keeping with the tenets of fluid design, I wanted it relative to the list of smaller thumbnails beside it. Future design revisions could also see it nested inside elements, or below others. A little bit of web crawling brought me to this page, which provided a function, which under most (but not all) circumstances, would find the left and top of any element on a page. I also used getPropertyValue to gain the width and height. (And if you’re interested, the width, height, left and right of an object do not change just because an element is rotated – JavaScript draws its data from the original box of the object).

我没有完全定位大图像，这使情况变得更加复杂：与流畅设计的宗旨保持一致，相对于旁边较小的缩略图列表，我想要它。 将来的设计修订版可能还会看到它嵌套在元素内部或其他元素之下。 一点网页爬虫就带我到了此页面，该页面提供了一个功能，该功能在大多数(但不是全部)情况下，可以找到页面上任何元素的左侧和顶部。 我还使用了getPropertyValue来获取宽度和高度。 (并且，如果您感兴趣的话，对象的宽度，高度，左右都不会因为旋转元素而改变– JavaScript从对象的原始框中绘制其数据)。

var yPos = findPosY(obj);
	// finds the vertical position of the big picture
xPos = findPosX(obj),
	// finds the horizontal position of the big picture
height = parseInt(document.defaultView.getComputedStyle(obj,null).
getPropertyValue("height")),
	// height of the big pic
width = parseInt(document.defaultView.getComputedStyle(obj,null).
getPropertyValue("width"));
	// width of the big pic

With that known data – the top and left of an object, along with its width and height - I could quickly calculate the corners of the large image (pre-rotation), and absolutely position Scotch tape images in those locations (as a test, I used vector rectangles exported as PNGs from PhotoShop).

有了这些已知的数据-对象的顶部和左侧，以及它的宽度和高度-我可以快速计算出大图像的角(预旋转)，并将透明胶带图像绝对定位在这些位置(作为测试，我使用了从PhotoShop导出为PNG的矢量矩形。

The result was great if the portfolio image only rotated a degree or so, but the Scotch tape was visibly out of place if the large image was rotated to its maximum extent. I knew the rotation amount, but the problem was that all transformations happen from the visual centre of an object by default. In other words, the Scotch tape images would rotate like a propeller if the same transformation was applied to them – I needed rotation around the centre of the large portfolio image.

如果档案袋图像仅旋转大约一个角度，则效果会很好，但是如果将大图像旋转到最大程度，则透明胶带显然会错位。 我知道旋转量，但是问题是默认情况下所有变换都是从对象的视觉中心发生的。 换句话说，如果将透明胶带图像应用到相同的变换，它们将像螺旋桨一样旋转–我需要绕着大型投资组合图像的中心旋转。

After a silly moment of working out the trigonometry to achieve this, I realized that the wizards of CSS do allow for repositioning the transformation origin of an element anywhere. There are a bunch of keywords for positioning the origin inside the element, but I wanted it outside, in the center of the large image. I knew the width and height of the image, so finding its midpoint was easy:

在研究了三角函数以实现这一目标的愚蠢时刻之后，我意识到CSS向导确实允许将元素的转换原点重新放置在任何地方。 有很多关键字可用于将原点定位在元素内部，但我希望将其定位在大图像中心。 我知道图像的宽度和高度，因此找到其中点很容易：

var bigoriginy = (height/2);
var bigoriginx = (width/2);
	// gets the center of the pic horizontally and vertically

Then, I just needed to set the origin of the Scotch tape pieces appropriately and rotate them the same amount as the large image.

然后，我只需要适当设置透明胶带片的原点，然后将其旋转到与大图像相同的量即可。

The script I had written thus far worked for my test cases of the top left and bottom right pieces of Scotch tape, but repeating lines of code for each transformation would be wasteful. Instead, I made an array based on the ids of the scotch tape pieces. Based on this, a logical naming scheme, and a search to find appropriate words in the id values of the elements, I then had the ability to apply the transformations I needed in a single for loop:

到目前为止，我编写的脚本适用于我的Scotch磁带左上角和右下角部分的测试用例，但是对于每次转换重复代码行将很浪费。 取而代之的是，我根据透明胶带片的ID制作了一个数组。 基于此，一个逻辑命名方案，以及一次搜索以在元素的id值中找到合适的词，然后我就能够在单个for循环中应用所需的转换：

var tape = 
new Array('top_left_corner_tape', 'top_right_corner_tape','bottom_left_corner_tape', 'bottom_right_corner_tape');
for (var i = 0; i < tape.length; i++ ) {
	// do this to all the pieces of tape
	thistape = document.getElementById(tape[i]);
	if (tape[i].match("left")) { 
		// if element ID has the word "left" in it, calculate left of tape as being close to left of the pic
		thistape.style.left = (xPos - 30)+"px"; 
		var originx = bigoriginx; 
		// the x distance of the origin for pieces of tape on the left is the horizontal midpoint of the pic
	}
	if (tape[i].match("right")) { 
		// if element ID has the word "right" in it, calculate left of tape as being close to right of the pic
		thistape.style.left = (xPos + width - 40)+"px"; 
		var originx = "-" + bigoriginx; 
		// the x distance of the origin for pieces of tape on the right is the horizontal midpoint of thebiopicc
	}
	if (tape[i].match("top")) { 
	// if element ID has the word "top" in it, calculate top of tape as being close to top of the pic
	thistape.style.top = (yPos - 40)+"px"; 
	var originy = bigoriginy;
	// the y distance of the origin for pieces of tape at the top is the vertical midpoint of thebiopicc
	}
	if (tape[i].match("bottom")) { 
		// if element ID has the word "bottom" in it, calculate top of tape as being close to bottom of the pic
	thistape.style.top = (yPos + height - 20)+"px"; 
	var originy = "-" + bigoriginy; 
	// the y distance of the origin for pieces of tape at the bottom is the vertical midpoint of the pic, signed negative
	}
	thistape.style.MozTransformOrigin = originx + "px " + originy + "px";
	// origin format for Mozilla
	thistape.style.webkitTransformOrigin =
	originx + "px " + originy + "px"; // origin format for Webkit
	thistape.style.webkitTransform = rotate;
	// rotate the tape by the same amount as the pic, for Webkit
	thistape.style.MozTransform = rotate;
	// rotate the tape by the same amount as the pic, for Mozilla
}

翻译自: https://thenewcode.com/3/CSS-Transforms-and-JavaScript