整合營銷服務商
電腦端+手機端+微信端=數據同步管理
免費咨詢熱線：
電腦端+手機端+微信端=數據同步管理
免費咨詢熱線：
擊右上方紅色按鈕關注“web秀”，讓你真正秀起來
前段時間寫過一篇《CSS3實現美美噠的圖片倒影效果》，里面最后一步，“我們使倒影傾斜一個角度，讓整個倒影效果更具有立體效果”，不知道大家有沒有聯想到用傾斜，我們可以制作一個立方體呢？？？
今天我們就來用純css制作一個立方體，主要用到的知識就是transform: rotate，沒有了解的可以點擊下方文章了解： 《CSS3中transition、transform傻傻分不清楚》
效果預覽圖：
CSS3實現3D水晶立方體效果
立方體，是由6個面組成的，所以我們主要是操作6個面，組合成一個立方體就可以實現。
觀察者方向的為z軸的正值方向
觀察者方向的為z軸的正值方向
rotateX 3D空間旋轉指定的角度，沿著垂直于X軸的方向順時針旋轉。 rotateY 3D空間旋轉指定的角度，沿著垂直于Y軸的方向順時針旋轉。 rotateZ 3D空間旋轉指定的角度，沿著垂直于Z軸的方向順時針旋轉。
CSS3實現3D水晶立方體效果
<div class="wrap"> <div class="cube"> <div class="before"></div> <div class="after"></div> </div> </div>
下面的樣式，我們對整個盒子沿著垂直于X軸的方向逆時針旋轉30°，Y軸逆時針旋轉80°，前面元素Z軸位移100px， 后面元素Z軸位移-100px，并Y軸順時針旋轉180°。讓效果看起來更明晰，有錯位立體感。
/*最外層容器樣式*/
.wrap{
width: 200px;
height: 200px;
margin: 150px auto;
position: relative;
}
/*包裹所有容器樣式*/
.cube{
width: 200px;
height: 200px;
margin: 0 auto;
/*preserve-3d 使其子元素具有3D效果*/
transform-style: preserve-3d;
transform: rotateX(-30deg) rotateY(-80deg);
}
.cube div{
position: absolute;
width: 200px;
height: 200px;
opacity: 0.8;
}
.cube .before{
transform: rotateY(0deg) translateZ(100px);
background: red;
}
.cube .after{
transform: translateZ(-100px) rotateY(180deg);
background: blue;
}
和第一步類似，同樣旋轉和位移這兩個面，使其能夠完美拼接
CSS3實現3D水晶立方體效果
<div class="wrap"> <div class="cube"> <div class="before"></div> <div class="after"></div> <div class="right"></div> <div class="left"></div> </div> </div>
添加樣式
.cube .left{
transform: rotateY(90deg) translateZ(100px);
background: green;
}
.cube .right{
transform: rotateY(-90deg) translateZ(100px);
background: yellow;
}
依次類推，完成上下2個面。
CSS3實現3D水晶立方體效果
<div class="wrap"> <div class="cube"> <div class="before"></div> <div class="after"></div> <div class="right"></div> <div class="left"></div> <div class="top"></div> <div class="bottom"></div> </div> </div>
添加樣式
.cube .top{
transform: rotateX(90deg) translateZ(100px);
background: purple;
}
.cube .bottom{
transform: rotateX(-90deg) translateZ(100px);
background: pink;
}
我們給每個面添加一個背景圖片，然后讓整個盒子旋轉起來，使我們可以看到每個面的內容。
<div class="wrap"> <div class="cube"> <div class="before"> <img src="../images/20180801122834.png" class="pic" /> </div> <div class="after"> <img src="../images/20180911140432.png" class="pic" /> </div> <div class="right"> <img src="../images/20181025165730.png" class="pic" /> </div> <div class="left"> <img src="../images/20181026153658.png" class="pic" /> </div> <div class="top"> <img src="../images/20180911175248.png" class="pic" /> </div> <div class="bottom"> <img src="../images/20180801121251.png" class="pic" /> </div> </div> </div>
添加樣式
.pic{
width: 200px;
height: 200px;
}
@-webkit-keyframes rotate{
from{
transform: rotateX(0deg) rotateY(0deg);
}
to{
transform: rotateX(360deg) rotateY(360deg);
}
}
.cube{
width: 200px;
height: 200px;
margin: 0 auto;
transform-style: preserve-3d;
transform: rotateX(-30deg) rotateY(-80deg);
-webkit-animation: rotate 20s infinite;
animation-timing-function: linear;
}
最終效果圖：
CSS3實現3D水晶立方體效果
喜歡小編的點擊關注，了解更多知識！
源碼地址請點擊下方“了解更多”
圖1
由兩組文字構成，都有陰影，加上左右晃動，3D效果很明顯（圖2）
圖2
響應式頁面，支持各種分辨率（圖3）
圖3
代碼完整，需要的朋友可以下載學習（圖4）
圖4
就愛UI - 分享UI設計的點點滴滴
天邊一朵云》是由蔡明亮執導，李康生、陳湘琪領銜主演的劇情電影，情節很文藝，攝影很露骨，屬于那種你看了后完全沒有擼點的色情片。看完本片后，我很后悔，所以我打算自己用html弄出天邊一片云（本句上下文沒有任何關聯，只有沒擼點這方面一樣）
云的特點就是模糊，琢磨不定，所以我的入手點就是陰影，讓我們開始擼代碼，上帝說要有個div，就有了一個div
<div id="cloud-circle"></div>
為了div有個伴，就從div的身體里拆下肋骨，變成了css
body {
width: 100vw;
height: 100vw;
background: cornsilk;
padding: 1%;
}
#cloud-circle {
width: 180px;
height: 180px;
background: coral;
border-radius: 50%;
box-shadow: 200px 200px 50px 0px #000;
}
其實就是畫了一個圓，然后用box-shadow加了個陰影，box-shadow的參數說明如下：
其中最后一個參數inset沒寫，模糊靠的是blur參數。看到的效果如下：
好像和云的形象距離比較遠，這時候要svg的filter出場了：
<svg width="0" height="0"> <filter id="filter"> <feTurbulence type="fractalNoise" baseFrequency=".01" numOctaves="10" /> <feDisplacementMap in="SourceGraphic" scale="10" /> </filter> </svg>
在上面的CSS里面加上這個filter
#cloud-circle {
width: 180px;
height: 180px;
background: coral;
border-radius: 50%;
filter: url(#filter);/*看這里看這里*/
box-shadow: 200px 200px 50px 0px #000;
}
看到的效果是這樣的
在filter的腐蝕下，cloud-circle這個div的面容變的憔悴了，（女同胞們，用手機攝像頭濾鏡是沒有好下場的!）。這里我們要講下filter。SVG使用<filter>元素來定義濾鏡。它的濾鏡其實有很多，效果各異，具體的內容可以看這里。我們用的是濾鏡中的feTurbulence，該濾鏡利用Perlin噪聲函數創建了一個圖像。它實現了人造紋理比如說云紋、大理石紋的合成。看到云紋了沒有，我們要的就是它。具體的參數不說了，大家可以自己去這里看，我們主要用SourceGraphic這個參數，這個參數值越大，對圖像的腐蝕性越強，我看180這個數字挺吉利，就用它試下：
<feDisplacementMap in="SourceGraphic" scale="10" />
效果如下：
這愁云慘霧的樣子就有些象了，但這個背景顏色不對，我這又不是沙城暴，不能是黃色的啊，調成藍天
background: linear-gradient(165deg, #527785 0%, #7FB4C7 100%);
看，沙城暴過去了，藍天來了
不過云彩一般是長條的，我們把那個圓形（如果大家還記得這個貨最開始一個圓的話）拉長，變成一個長橢圓形。
#cloud-circle {
/*拉長width和height的比例*/
width: 500px;
height: 275px;
background: coral;
border-radius: 50%;
filter: url(#filter);
box-shadow: 200px 200px 50px 0px #000;
}
效果就變成這樣啦
這兩貨你儂我儂的，靠的太緊了，桔色這家伙還壓在別人黑小姐身上，太不純潔了，拆散拆散。
#cloud-circle {
width: 500px;
height: 275px;
background: coral;
border-radius: 50%;
filter: url(#filter);
box-shadow: 400px 400px 60px 0px #fff; /* 拉大陰影的位移位置，改變陰影的顏色 */
position: absolute; /* 改成絕對定位 */
top: -320px; /* 向上移一點 */
left: -320px; /* 向左移一點 */
}
于是，猴急的橙色男士被移出了窗口，看不見了，黑小姐變成了白小姐了。
我終于成功的拆散了他們，心情很是舒暢，一朵白云就這么做出來了。但看她單薄的樣子，一副二次元的模樣，我覺得很不滿意，我不是宅男啊，不喜歡紙片人，我要讓她有立體感，咋辦呢，這時候，要祭出一張原理圖，讓大家知道我也是有理論知識的。
看，一朵有層次的云其實是真的靠層次來體現的，三層合一就是一朵有白有黑，前凸后翹的立體云了，我們開始擼代碼，先來三層云：
<div class="cloud" id="cloud-back"></div> <div class="cloud" id="cloud-mid"></div> <div class="cloud" id="cloud-front"></div>
然后各自擁有自己的filter
<svg width="0" height="0"> <!--Top Layer--> <filter id="filter-back"> <feTurbulence type="fractalNoise" baseFrequency="0.012" numOctaves="4" seed="0" /> <feDisplacementMap in="SourceGraphic" scale="170" /> </filter> <filter id="filter-mid"> <feTurbulence type="fractalNoise" baseFrequency="0.012" numOctaves="2" seed="0"/> <feDisplacementMap in="SourceGraphic" scale="150" /> </filter> <filter id="filter-front"> <feTurbulence type="fractalNoise" baseFrequency="0.012" numOctaves="2" seed="0"/> <feDisplacementMap in="SourceGraphic" scale="100" /> </filter> </svg>
里面主要變化就在SourceGraphic，之前講過，這個參數越大，腐蝕性越強。另外css也要做下修改：
.cloud {
width: 500px;
height: 275px;
border-radius: 50%;
position: absolute;
top: -35vh;
left: -25vw;
}
#cloud-back {
filter: url(#filter-back);
box-shadow: 300px 300px 30px -20px #fff;
}
#cloud-mid {
filter: url(#filter-mid);
box-shadow: 300px 340px 70px -60px rgba(158, 168, 179, 0.5);
left: -25vw;
}
#cloud-front {
filter: url(#filter-front);
box-shadow: 300px 370px 60px -100px rgba(0, 0, 0, 0.3);
left: -25vw;
}
主要是針對三層云的顏色和陰影大小位置做了些調整，最終的結果就出來了。
一朵怎么看怎么象真的云就出現了。
最后，如果大家看完了《天邊一片云》這部電影，對西瓜這種水果會有全新的認識.....
原文鏈接：https://css-tricks.com/drawing-realistic-clouds-with-svg-and-css/
翻譯作者： wphmoon
代碼查看：「鏈接」
*請認真填寫需求信息，我們會在24小時內與您取得聯系。
