剛剛進園,第一篇博客,記錄一下CSS3 繪製盒子效果的方法。css
css3容許使用 3D 轉換來對元素進行格式化,轉換是使元素改變形狀、尺寸和位置的一種效果,3D轉換能夠經過設置transform的屬性值來實現動畫效果,其屬性值有translate3d()移動,rotate3d()旋轉,scale3d縮放,perspective(n)透視等,各屬性值又能夠細細劃分,這裏就不一一贅述,其中rotate又分爲rotateX(),rotateY(),rotateZ()定義沿 X-Y-Z 軸的 3D 旋轉; transition屬性起到過渡效果,配合translateX(x),translateY(y),translateZ(z)等沿X-Y-Z軸移動效果就能創造出意想不到的效果。html
下面再介紹幾個css3的3D屬性:css3
perspective 屬性定義 3D 元素距視角點的距離,這個屬性容許你改變3D元素是怎樣查看透視圖,隻影響3D轉換元素,當爲元素添加 perspective 屬性時,元素自己不會得到透視效果,而其子元素會得到;web
perspective-origin 屬性設置 3D 元素的視角點位置,定義 3D 元素所基於的 X 軸和 Y 軸,該屬性容許改變 3D 元素的底部位置,當爲元素添加該屬性時,其子元素會得到透視效果。參數:x--默認值:center(50%), y--默認值:center(50%)【top | bottom | left | right | center | length | %】 瀏覽器
transform-style:規定如何在3D空間中呈現被嵌套的元素,添加在父級元素上,若值爲preserve-3d,則其子元素將保留其 3D 位置;默認值爲flat,即全部元素默認呈如今2D平面上;該屬性存在瀏覽器兼容問題,可以使用-webkit-,-o-,-moz-等前綴兼容;動畫
@keyframes關鍵幀規則建立動畫效果 至少規定動畫名稱和動畫時長。url
下面是盒子的效果和代碼:spa
效果圖:3d
html結構:code
<div class="wrap"> <ul class="bigger"> <ul class="small"> <div></div> <div></div> <div></div> <div></div> <div></div> <div></div> </ul> <li></li> <li></li> <li></li> <li></li> <li></li> <li></li> </ul> </div>
css代碼:
<style> body{ background: #000 url('img/bg.jpg') no-repeat center top; } .wrap{ position: relative; width: 300px; height: 300px; margin: 200px auto; perspective: 2000px; } .wrap .bigger,.wrap .small{ transform-style: preserve-3d; transform: rotateY(60deg); transform-origin: top; transition: all 2s; } .small{ animation: move 5s linear infinite; } .bigger{ animation: move 5s linear infinite; } .small div{ position: absolute; top: 80px; left: 80px; width: 150px; height: 150px; transition: all 2s; opacity: 0.7; } .bigger li{ position: absolute; top: 0; left: 0; width: 298px; height: 298px; border: 1px solid #fff; transition: all 2s; } .small div:nth-child(1){ background: url('img/1.jpg'); transform: translateZ(75px); } .small div:nth-child(2){ background: url('img/2.jpg'); transform: translateZ(-75px); } .small div:nth-child(3){ background: url('img/3.jpg'); transform: rotateY(90deg) translateZ(75px); } .small div:nth-child(4){ background: url('img/4.jpg'); transform: rotateY(-90deg) translateZ(75px); } .small div:nth-child(5){ background: url('img/5.jpg'); transform: rotateX(90deg) translateZ(75px); } .small div:nth-child(6){ background: url('img/6.jpg'); transform: rotateX(-90deg) translateZ(75px); } .bigger li:nth-child(2){ background: hsla(0,50%,50%,.4); transform: translateZ(150px); } .bigger li:nth-child(3){ background: hsla(60,50%,50%,.4); transform: translateZ(-150px); } .bigger li:nth-child(4){ background: hsla(120,50%,50%,.4); transform: rotateY(90deg) translateZ(150px); } .bigger li:nth-child(5){ background: hsla(180,50%,50%,.4); transform: rotateY(-90deg) translateZ(150px); } .bigger li:nth-child(6){ background: hsla(240,50%,50%,.4); transform: rotateX(90deg) translateZ(150px); } .bigger li:nth-child(7){ background: hsla(320,50%,50%,.4); transform: rotateX(-90deg) translateZ(150px); } .wrap:hover .bigger{ transform: rotateY(360deg); } .wrap:hover .bigger li:nth-child(2){ transform: translateZ(300px); } .wrap:hover .bigger li:nth-child(3){ transform: translateZ(-300px); } .wrap:hover .bigger li:nth-child(4){ transform: rotateY(90deg) translateZ(300px); } .wrap:hover .bigger li:nth-child(5){ transform: rotateY(-90deg) translateZ(300px); } .wrap:hover .bigger li:nth-child(6){ transform: rotateX(90deg) translateZ(300px); } .wrap:hover .bigger li:nth-child(7){ transform: rotateX(-90deg) translateZ(300px); } @keyframes move{ 0%{ transform: rotateY(0deg); } 50%{ transform: rotateY(180deg); } 100%{ transform: rotateY(360deg); } } </style>
剛剛學css3,代碼結構比較亂,代碼裏的圖片可替換成你們喜歡的圖片,在寫上面代碼時有一些注意事項:
外層容器的高度會影響旋轉的角度和位置,若是代碼出現總體向外旋轉的現象,能夠嘗試減少外層容器的寬高;perspective要放在較外層(body也能夠),不然部分效果會受影響,另外在寫3d效果時,transform-style: preserve-3d;最好每次都加上,沒毛病,linear是勻速運動,infinite是無限次運動。