【CSS】770- 多層嵌套的CSS 3D動(dòng)畫技術(shù)詳解
<div class='frame'><div class='door'>div>div></div>為了打開這扇門，我們給它添加一個(gè)door--opencss類： <div class='frame'><div class='door door--open'>div>div></div>現(xiàn)在，我們對(duì)它使用3D變換技術(shù)(通過對(duì)它的左側(cè)應(yīng)用transform-origin)屬性： .door--open {transform-origin: 0 0 /*whatever y value you wish*/;transform: rotateY(-45deg);}對(duì)于使用CSS 3D變換，你唯一需要添加的CSS前綴可能只有-webkit-。IE9是完全不支持的，但I(xiàn)E10+是不需要使用前綴的。Opera 12及其之前版本完全不支持CSS變換技術(shù)，之后的版本在使用-webkit-前綴后是支持的。火狐瀏覽器從V16版(2012年)起不需要使用前綴。 效果： 現(xiàn)在的效果看起來并不是很真實(shí)。更真實(shí)實(shí)現(xiàn)這種效果的CSS屬性叫做perspective(透視)，它會(huì)讓東西看起來近處的大，遠(yuǎn)處的小。 perspective屬性必須應(yīng)用到需要做3D變換的元素的父元素上。在WebKit瀏覽器里，只要是它的祖先元素都行，但在火狐或IE里只能是父元素。 現(xiàn)在我們要往門框元素上添加一個(gè)frame--realistic類： <div class='frame frame--realistic'><div class='door door--open'>div>div></div>現(xiàn)在我們?cè)谄渖显O(shè)置perspective透視屬性。透視屬性的值約小，它就會(huì)顯得離你的眼睛越近，這樣，越近的東西會(huì)顯得越大，越遠(yuǎn)的越小。 .frame--realistic {perspective: 20em;}我們就得到了下面的效果： 這樣看起來就好多了！但我們可以做得更好！比如，我們可以讓這扇門動(dòng)起來，并且具有3D效果。我們只需要在HTML和CSS里將door-open類換成door--ani類： .door--ani {transform-origin: 0 0;animation: doorani 1.3s ease-in-out infinite alternate;}@keyframes doorani {from { transform: rotateY(-43deg); }to { transform: rotateY(43deg); }}效果： 現(xiàn)在，我們還想讓這扇門的門框也以3D的形式動(dòng)起來。這很簡(jiǎn)單，不是嗎？只需要在門框上添加一個(gè)frame--ani類，設(shè)定一個(gè)動(dòng)畫動(dòng)作，將perspective透視屬性移動(dòng)到它的父元素上： HTML代碼變成了這樣: <div class='frame frame--ani'><div class='door door--ani'>div>div></div>我們還需要添加下面的CSS代碼： .container--realistic {perspective: 20em;}.frame--ani {animation: frameani 2s ease-in-out infinite alternate;}@keyframes frameani {from { transform: rotateY(-30deg); }to { transform: rotateY(30deg); }}可是，我們得到的效果卻是： 看起來有些怪。看起來門的動(dòng)畫效果被門框的擺動(dòng)抵消了。的確，事情就是這樣，因?yàn)閠ransform-style屬性(用來告訴瀏覽器一個(gè)具有3D變換屬性的子元素是否附隨父元素的3D變換屬性)的缺省值是flat。 這個(gè)問題可以通過將其父元素設(shè)置transform-style: preserve-3d來糾正。這樣，我們就可以看到更自然的效果了： 但是，IE10/11只支持transform-style的flat值。有時(shí)我們會(huì)利用這種技術(shù)將父元素和子元素通過3D變換串聯(lián)起來。 例如，我有一個(gè)稍微傾斜的立方體(沒有頂部和底部面)。HTML代碼是： <div class='cube'><div class='face'>div><div class='face'>div><div class='face'>div><div class='face'>div>div></div>相關(guān)的CSS： .cube {position: relative;width: 5em; height: 5em;transform-style: preserve-3d;transform: rotateY(30deg) rotateX(10deg);}.face {position: absolute;width: 100%; height: 100%;}.face:nth-child(1) {transform: /*rotateY(0deg)*/ translateZ(2.5em /* half the side length, 5em in this case */);}.face:nth-child(2) {transform: rotateY( 90deg) translateZ(2.5em);}.face:nth-child(3) {transform: rotateY(180deg) translateZ(2.5em);}.face:nth-child(4) {transform: rotateY(270deg) translateZ(2.5em);}使用這些代碼(這里有更詳細(xì)的解釋)，我們得到了下面的效果： 如果你使用的是IE，我們需要在對(duì)每個(gè)面實(shí)施3D變換前先清空變換屬性(如果這個(gè)立方體的父類也有變換特征，也需要先清空。)。我將立方體的父元素也處理了，就像下面： .cube--ie {perspective: 20em;transform: none;}.face--ie:nth-child(1) {transform: rotateY(30deg) rotateX(10deg)translateZ(2.5em);}.face--ie:nth-child(2) {transform: rotateY(30deg) rotateX(10deg)rotateY( 90deg) translateZ(2.5em);}.face--ie:nth-child(3) {transform: rotateY(30deg) rotateX(10deg)rotateY(180deg) translateZ(2.5em);}.face--ie:nth-child(4) {transform: rotateY(30deg) rotateX(10deg)rotateY(270deg) translateZ(2.5em);}于是，在IE里也得到了同樣的效果： 雖然不是很方便，但也不是很糟。代碼不是很多，也不是很亂…然而，當(dāng)我們想旋轉(zhuǎn)這個(gè)立方體時(shí)卻出現(xiàn)了問題。我們需要使用transform-style: preserve-3d屬性，我們簡(jiǎn)單的增加了一個(gè)cube--ani類，這段CSS代碼是： .cube--ani {animation: rot 4s linear infinite;}@keyframes rot {to { transform: rotateY(-330deg) rotateX(370deg); }}可是，對(duì)于IE10/11來說，我們無法對(duì)立方體自身施加3D變換，我們只能對(duì)每個(gè)面單獨(dú)實(shí)施3D變換。這就是說，我們要對(duì)所有的面設(shè)置變換屬性。這就是說….每個(gè)面都要！ .cube--ie {animation: none;}.cube--ani .face--ie:nth-child(1) {animation: rot1 4s linear infinite;}@keyframes rot1 {to {transform: rotateY(-330deg) rotateX(370deg)translateZ(2.5em);}}.cube--ani .face--ie:nth-child(2) {animation: rot2 4s linear infinite;}@keyframes rot2 {to {transform: rotateY(-330deg) rotateX(370deg)rotateY(90deg) translateZ(2.5em);}}.cube--ani .face--ie:nth-child(3) {animation: rot3 4s linear infinite;}@keyframes rot3 {to {transform: rotateY(-330deg) rotateX(370deg)rotateY(180deg) translateZ(2.5em);}}.cube--ani .face--ie:nth-child(4) {animation: rot4 4s linear infinite;}@keyframes rot4 {to {transform: rotateY(-330deg) rotateX(370deg)rotateY(270deg) translateZ(2.5em);}}這一大片，就是為了實(shí)現(xiàn)這個(gè)效果： 如果這么多的代碼只是為了這4個(gè)面，那當(dāng)需要面對(duì)100多個(gè)面時(shí)，你能想象是多恐怖的一堆代碼嗎？ 你也許會(huì)想到上面的門也有這種問題，門的父元素有高度和寬度，是可見。如何在IE里實(shí)現(xiàn)？唯一能讓門和門框在IE里一起動(dòng)起來的方案就是修改HTML代碼，讓門和門框變成兄弟元素，單獨(dú)對(duì)它們施加動(dòng)畫效果。
1. JavaScript 重溫系列（22篇全） 2. ECMAScript 重溫系列（10篇全） 3. JavaScript設(shè)計(jì)模式 重溫系列（9篇全） 4.?正則 / 框架 / 算法等 重溫系列（16篇全） 5.?Webpack4 入門（上）||?Webpack4 入門（下） 6.?MobX 入門（上）?||??MobX 入門（下） 7. 80+篇原創(chuàng)系列匯總 回復(fù)“加群”與大佬們一起交流學(xué)習(xí)~
點(diǎn)擊“閱讀原文”查看 80+ 篇原創(chuàng)文章
評(píng)論圖片表情在线黄色毛片 | 高潮喷水免费网站 | 国产 在线 无码 福利 | 毛片福利 | 亚洲狼在线 |<kbd id="afajh"><form id="afajh"></form></kbd> <strong id="afajh"><dl id="afajh"></dl></strong> <del id="afajh"><form id="afajh"></form></del>
<th id="afajh"><progress id="afajh"></progress></th> <b id="afajh"><abbr id="afajh"></abbr></b> <th id="afajh"><progress id="afajh"></progress></th>
