css3d转换_使用CSS 3D转换创建网页电影摄影

css3d转换

“Cinemagraphs” are animated photographs that feature repeated and subtle movement. Early experiments by Kevin Burg and Jamie Beck in fashion photography led to the format’s modern popularity.

“电影摄制”是具有重复和微妙动作的动画照片。 凯文·伯格(Kevin Burg)和杰米·贝克(Jamie Beck)早期在时尚摄影中进行的实验导致了这种格式在现代的流行。

But GIFs - the usual source for cinegraphs - aren’t a video format, and can’t be controlled very well. In addition, creating a true cinemagraph can require a lot of work. Over the weekend I realized that for some images the same effect could be created using CSS 3D transforms. As an alternative to the expense of shooting full video, this could be a valuable, performant and efficient technique for product demos and visualizations.

但是GIF(通常是电影的来源)不是视频格式，因此无法很好地控制。 另外，创建真实的电影胶片可能需要大量工作。 整个周末，我意识到对于某些图像，可以使用CSS 3D变换来创建相同的效果。 除了拍摄完整视频的费用以外，这对于产品演示和可视化可能是一种有价值，高效且有效的技术。

搭建舞台 (Setting The Stage)

We start with the still portion of the image: in this case I’ve used a photograph from the previously mentioned startupstockphotos, used as a background in a div:

我们从图像的静止部分开始：在这种情况下，我使用了前面提到的 startupstockphotos中的照片，用作div中的背景：

<div id="backgroundcontainer">
</div>

The CSS sets the image to cover the width of the element, and sets the height of the element to the background image:

CSS将图像设置为覆盖元素的宽度，并将元素的高度设置为背景图像：

div#backgroundcontainer {
	background-image: url(macbook-background.jpg);
	background-image: image-set("macbook-background.jpg" 1x,
	"macbook-background-2x.jpg" 2x);
	background-size: contain;
	background-repeat: no-repeat;
	max-width: 750px;
	margin: 0 auto;
	padding-top: 53.4%;
	position: relative;
}

I’ll have more to say about using Retina background images with image-set in an upcoming article.

在接下来的文章中，我将对使用带有image-set Retina背景图像有更多的话要说。

放置玩家 (Placing The Player)

Even if they’re familiar with CSS 3D, most web developers don’t realise that 3D transforms can be applied to any element… even <iframe>`, meaning that YouTube videos and other sources are open to manipulation in three dimensions.

即使他们熟悉CSS 3D，大多数Web开发人员也没有意识到3D变换可以应用于任何元素…甚至<iframe> `，这意味着YouTube视频和其他资源可以在三个维度上进行操作。

Videos from YouTube aren’t automatically responsive, but I’ve previously addressed how to solve that problem, and will use the same solution here:

YouTube的视频不会自动响应 ，但是我之前已经解决了如何解决该问题 ，并将在此处使用相同的解决方案：

<div id="backgroundcontainer">
	<div id="ivideo">
		<iframe frameborder="0" 
			src="https://youtube.com/embed/V7be0UEJDdo…">
		</iframe>
	</div>
</div>

The embedded video will autoplay; the next step is to set it on the page.

嵌入的视频将自动播放； 下一步是在页面上进行设置。

The specific code used in this YouTube example will be addressed in a future article.

此YouTube示例中使用的特定代码将在以后的文章中介绍。

发光角度 (The Light Angle)

To set the position of the video correctly, several things need to happen. The first is that the outer <div> element needs the correct perspective values applied:

要正确设置视频的位置，需要做几件事。 首先是外部<div>元素需要应用正确的perspective值：

div#backgroundcontainer { 
	perspective: 472px;
	perspective-origin: 103% 8%;
}

We’ll use the fact that this outer container has relative positioning to set the absolute position of the inner <div> containing the video:

我们将使用这个外部容器具有相对位置的事实来设置包含视频的内部<div>的绝对位置 ：

#ivideo {
	position: absolute;
	top: 0;
	right: 2.1%;
	width: 41.6%;
	padding-bottom: 21%;
}

The combination of absolute positioning together with width and padding-bottom makes the video responsive, if it is combined with the following declaration:

如果结合以下声明，则将绝对定位与width和padding-bottom结合在一起可以使视频具有响应能力：

#ivideo iframe {
	position: absolute;
	width: 100%;
	height: 100%;
}

The values I used to set the correct angle for this video were:

我用来为此视频设置正确角度的值是：

#ivideo {
	transform: rotateX(10deg) rotateY(-7deg) translateY(74%);
}

Finding these values is a combination of experience, experimentation and testing. I knew that the vanishing point set by the perspective-origin value corresponded to the top right of the background image: you can see the vertical edges of the Macbook screen narrowing towards that location. iframe starts off in the same approximate location due to the positioning of its surrounding <div>, so moving it down (using translateY was the first order of operations. Then, I had to rotate it in X and Y. This was helped by using a small trick in Chrome’s Element inspector: placing your cursor in a CSS value and using the up and down cursor keys will raise and lower the value by 1.

找到这些值是经验，实验和测试的结合。 我知道perspective-origin值设置的消失点对应于背景图像的右上角：您可以看到Macbook屏幕的垂直边缘朝该位置变窄。 iframe由于其周围的<div>位置而在相同的近似位置开始，因此将其向下移动(使用translateY是操作的第一顺序。然后，我不得不将其旋转为X和Y。这通过使用Chrome的“元素”检查器中的一个小技巧：将光标置于CSS值中，并使用上下光标键将值增加或减少1。

Of course, the changes you make here will only take effect in the browser, not in the code of your page. If you wanted the changes to be written permanently into the code, you could use Chrome Workspaces to do so.

当然，您在此处所做的更改只会在浏览器中生效，而不会在页面代码中生效。 如果您希望将更改永久写入代码中，则可以使用Chrome Workspaces进行更改。

Chrome Element inspect property value adjusted with up-down cursor keys

Chrome元素检查使用上下光标键调整的属性值

剪切并打印 (Cut & Print)

Using this live experimentation, I gained the correct values to move the video to the right place. However, you may find that the perspective isn’t perfect at every viewport size. To fix this, I introduced a @media query:

通过这次现场实验，我获得了将视频移到正确位置的正确值。 但是，您可能会发现透视图并非在每个视口尺寸上都是完美的。 为了解决这个问题，我引入了@media查询：

@media screen and (max-width: 600px) {
	div#container { 
		perspective: 250px;
	}
}

I have plans for at least one other variation of this technique: if you enjoyed it, I hope you’ll come back for more. To be alerted for new updates and more web development news, I’d suggest following me on Twitter… or, if you’re old school, subscribing to this site’s RSS feed.

我已经计划了这项技术的至少另一种变体：如果您喜欢它，我希望您会再来获得更多。 要收到有关新更新和更多Web开发新闻的警报，建议您在Twitter上关注我 ……或者，如果您是老学校，请订阅该站点的RSS feed 。

翻译自: https://thenewcode.com/367/Create-Web-Page-Cinemagraphs-with-CSS-3D-Transforms

css3d转换