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)早期在時尚攝影中進行的實驗導致了這種格式在現(xiàn)代的流行。

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(通常是電影的來源)不是視頻格式，因此無法很好地控制。 另外，創(chuàng)建真實的電影膠片可能需要大量工作。 整個周末，我意識到對于某些圖像，可以使用CSS 3D變換來創(chuàng)建相同的效果。 除了拍攝完整視頻的費用以外，這對于產品演示和可視化可能是一種有價值，高效且有效的技術。

搭建舞臺 (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開發(fā)人員也沒有意識到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示例中使用的特定代碼將在以后的文章中介紹。

發(fā)光角度 (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 keysChrome元素檢查使用上下光標鍵調整的屬性值

剪切并打印 (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:

通過這次現(xiàn)場實驗，我獲得了將視頻移到正確位置的正確值。 但是，您可能會發(fā)現(xiàn)透視圖并非在每個視口尺寸上都是完美的。 為了解決這個問題，我引入了@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開發(fā)新聞的警報，建議您在Twitter上關注我 ……或者，如果您是老學校，請訂閱該站點的RSS feed 。

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

css3d轉換

總結

以上是生活随笔為你收集整理的css3d转换_使用CSS 3D转换创建网页电影摄影的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。