2. 程式人生 > >CSS3通過3D變換實現20面立體形狀

CSS3通過3D變換實現20面立體形狀

阿新 • • 發佈：2018-11-25 
宣告：本來想做一個多面體相簿的，但是在網上沒有找到例子，最終完整程式碼是在一個英文程式網站上copy的，但是沒有解釋，我把大體實現流程解釋了一遍，旋轉真的是繞蒙我了····

程式碼：
<!DOCTYPE html>
<html>
<head>
    <title>二十面體</title>
    <style type="text/css">
html, body {
  height: 100%;
  margin: 0;
  background: rgba(0, 0, 0,1);
}
.sharp {
  animation: ani 4s linear infinite;
}
div {
  transform-style: preserve-3d;
  transform: translate(-50%, -50%) rotate3d(0, 1, 0, 72deg);
  position: absolute;
  left: 50%;
  top: 50%;
}
span {                       /*利用邊框做一個三角形*/
  border-color: transparent transparent rgba(255, 255, 255, 0.5) transparent;/*每個span下方設定顏色，其餘邊透明*/
  border-width: 173.2px 100px;
  border-style: solid;
  width: 0;
  height: 0;
  position: absolute;
  left: 50%;
  margin-left: -100px;
  top: 50%;
  margin-top: -346.4px;
}

span:before {          /*利用邊框在span中做一個三角形，實現巢狀，讓span變成邊框,span:before變成要顯示的東西*/
  content: '';
  border-color: transparent transparent rgba(0, 123, 123, 0.5) transparent;/*設定每面的顏色*/
  border-width: 165.2px 92px;
  border-style: solid;
  width: 0;
  height: 0;
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  margin-top: 4px;
}

div span:nth-child(1) {
  transform: rotate3d(0, 1, 0, 72deg) rotate3d(1, 0, 0, 51.5deg);
}

div span:nth-child(2) {
  transform: rotate3d(0, 1, 0, 144deg) rotate3d(1, 0, 0, 51.5deg);
}

div span:nth-child(3) {
  transform: rotate3d(0, 1, 0, 216deg) rotate3d(1, 0, 0, 51.5deg);
}

div span:nth-child(4) {
  transform: rotate3d(0, 1, 0, 288deg) rotate3d(1, 0, 0, 51.5deg);
}

div span:nth-child(5) {
  transform: rotate3d(0, 1, 0, 360deg) rotate3d(1, 0, 0, 51.5deg);
}

.sharp div:nth-child(1) {
  transform: translateY(51px) rotateY(108deg) rotateX(116deg) translateZ(31px);
}

.sharp div:nth-child(2) {
  transform: translateY(51px) rotateY(180deg) rotateX(116deg) translateZ(31px);
}

.sharp div:nth-child(3) {
  transform: translateY(51px) rotateY(252deg) rotateX(116deg) translateZ(31px);
}

.sharp div:nth-child(4) {
  transform: translateY(51px) rotateY(324deg) rotateX(116deg) translateZ(31px);
}

.sharp div:nth-child(5) {
  transform: translateY(51px) rotateY(396deg) rotateX(116deg) translateZ(31px);
}

@keyframes ani {
  100% {
    transform: rotateY(360deg);
  }
}
</style>
</head>
<body>
<div class="sharp">
  <div>
    <span></span>
    <span></span>
    <span></span>
    <span></span>
    <span></span>
  </div>
  <div>
    <span></span>
    <span></span>
    <span></span>
    <span></span>
    <span></span>
  </div>
  <div>
    <span></span>
    <span></span>
    <span></span>
    <span></span>
    <span></span>
  </div>
  <div>
    <span></span>
    <span></span>
    <span></span>
    <span></span>
    <span></span>
  </div>
  <div>
    <span></span>
    <span></span>
    <span></span>
    <span></span>
    <span></span>
  </div>
  <div>
    <span></span>
    <span></span>
    <span></span>
    <span></span>
    <span></span>
  </div>
</div>
</body>
</html>

 

 

程式碼大體解讀

 

一、

span {                       /*利用邊框做一個三角形*/
  border-color: transparent transparent rgba(255, 255, 255, 0.5) transparent;/*每個span下方設定顏色，其餘邊透明*/


  border-width: 173.2px 100px;
  border-style: solid;
  width: 0;
  height: 0;
  position: absolute;
  left: 50%;
  margin-left: -100px;
  top: 50%;
  margin-top: -346.4px;
}

 

 

span:before {          

/*利用邊框在span中做一個三角形，實現巢狀，讓span變成邊框,span:before變成要顯示的東西*/
  content: '';
  border-color: transparent transparent rgba(0, 123, 123, 0.5) transparent;/*設定每面的顏色*/
  border-width: 165.2px 92px;
  border-style: solid;
  width: 0;
  height: 0;
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  margin-top: 4px;
}

 

  先用一個0寬0高的盒子，將盒子的邊框設定寬度

  border-width: 173.2px 100px;
  border-style: solid;
  width: 0;
  height: 0;

再將左  上   右顏色屬性變為透明

border-color: transparent transparent blue transparent;

左  上   右都會看不見，就只剩下下邊的，這樣就變成一個三角形了

span:before 就是在三角形上在加一個三角形起到duo多出一個像邊框的效果

 

二、

一個div中有五個span，那麼通過上一步就做成了五個三角形，將這五個三角形進行3D位移加旋轉

 

html

<div>
  <span></span>
  <span></span>
  <span></span>
  <span></span>
  <span></span>
</div>

 

css

div span:nth-child(1) {
  transform: rotate3d(0, 1, 0, 72deg) rotate3d(1, 0, 0, 51.5deg);
}

div span:nth-child(2) {
  transform: rotate3d(0, 1, 0, 144deg) rotate3d(1, 0, 0, 51.5deg);
}
div span:nth-child(3) {
  transform: rotate3d(0, 1, 0, 216deg) rotate3d(1, 0, 0, 51.5deg);
}
div span:nth-child(4) {
  transform: rotate3d(0, 1, 0, 288deg) rotate3d(1, 0, 0, 51.5deg);
}
div span:nth-child(5) {
  transform: rotate3d(0, 1, 0, 360deg) rotate3d(1, 0, 0, 51.5deg);
}

 變成這樣   蓋子一共由五個三角形組成

 

 

 

 

三、將上步的div做一個整體的3d變換

.sharp div:nth-child(1) {
  transform: translateY(51px) rotateY(108deg) rotateX(116deg) translateZ(31px);
}

 

 

四、

在HTML中再加一個div，也進行整體移動，兩者有重合的三角形
.sharp div:nth-child(2) {
  transform: translateY(51px) rotateY(180deg) rotateX(116deg) translateZ(31px);
}

 

 

五、

再加三個div，繼續變換，最終只差一個蓋了

.sharp div:nth-child(3) {
  transform: translateY(51px) rotateY(252deg) rotateX(116deg) translateZ(31px);
}

.sharp div:nth-child(4) {
  transform: translateY(51px) rotateY(324deg) rotateX(116deg) translateZ(31px);
}

.sharp div:nth-child(5) {
  transform: translateY(51px) rotateY(396deg) rotateX(116deg) translateZ(31px);
}

 

 

 

六、

在加一個div，不用變換，因為本來的位置就是蓋

 

七、最後加個旋轉動畫就可以了

 

 

相關推薦

CSS3通過3D變換實現20面立體形狀

宣告：本來想做一個多面體相簿的，但是在網上沒有找到例子，最終完整程式碼是在一個英文程式網站上copy的，但是沒有解釋，我把大體實現流程解釋了一遍，旋轉真的是繞蒙我了···· 程式碼： <!DOCTYPE html> <html> <head> <t

CSS3 3D環境實現立體 魔方效果代碼

3d 魔方 css 環境實現 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>魔方</title>

通過編碼來實現軟件界面

hao123 ongl com roi aid music .com 編碼 list %E5%85%B3%E4%BA%8EaNDROID%E5%A6%82%E4%BD%95%E5%AE%9E%E7%8E%B0%E8%AF%84%E8%AE%BA http://music.h

CSS3:3D環繞實現

-a 都在 音樂 keyframes 圖片路徑 art png posit borde CSS3：3D環繞實現篇 廢話不多說，直接給大家看效果：[不僅有背景，還有音樂] 大神請繞道：小白請繼續往下看： 是不是心動了呢，心動不如行動：代碼在手，天下我有，表白利器可不要錯過了

CSS3 3D變換實例 滾動的正方體

ive spec osi 鏡像 tex -s 3d變換 itl 根據 筆記： 2D變換 　　transform 　　　　位移 　　　　 translateX() translateY() 　簡寫：translate(X值，Y值) 正值向右，負值向左 旋轉 rota

CSS3中的3D動畫實現(鐘擺、魔方)--實現代碼

等待 比例 需要 時間 span bottom translate abs ase CSS3中的3D動畫實現(鐘擺、魔方) CSS3的2D變形----傳統的transform變形效果 transform ： translate、scale、rotate、skew… tran

ECCV 2018 | 曠視科技提出GridFace：通過學習區域性單應變換實現人臉校正

全球計算機視覺三大頂會之一 ECCV 2018（European Conference on Computer Vision）即將於 9 月 8 -14 日在德國慕尼黑拉開帷幕，曠視科技有多篇論文被此大會接收。在這篇論文中，曠視科技提出的一種通過學習區域性單應變換實現人臉校正的全新方法——GridFac

css3製作3D立體模型

 程式碼跟註釋都在裡面了！想知道是什麼效果不妨自己試試！ <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title></title> &l

CSS3之3D變形，實現大海波濤

animation:動畫名稱 花費時間 運動曲線 何時開始 播放次數 是否反方向; @keyframes 動畫名稱 { from{ 開始位置 } 0% to{ 結束 } 100% } 實現程式碼： <!DOCTYPE html> <html> <head&

深入理解css3 3d變換

一、寫在前面的秋褲 早在去年的去年，我就大肆介紹了2D transform相關內容。看過海賊王的都知道，帶D的傢伙都不是好惹的，2D我輩尚可以應付，3D的話，呵呵，估計我等早就在千里之外被其霸氣震暈了~~ 看看下圖女帝的動作以及神情，就可以

通過transform來實現的2D/3D的轉換

.box>div{ width: 300px; height:150px; border: 1px solid #000; background-color: red; float: left; margin-right: 30px; } div:nth-child(2){ backgr

css3中的3d屬性實現一個星空效果

在css3新增屬性的學習中，有關3d的知識，下面是利用transform屬性的3d效果做的一個星空中星球圍繞太陽旋轉，實現了自轉和公轉效果；話不多說，直接code： HTML： <!DOCTYPE html> <html> <head>

CSS3 的text-shadow實現立體文字和燃燒文字

立體文字演示效果如下： 程式碼如下： <!DOCTYPE html> <html lang="en"> <head><meta charset="UTF-8"><title>Document</title&

餓了麼專案---10、（1）css3過渡、變換及3d變換、動畫

本部落格參考書籍《HTML5權威指南》，為個人原創，轉載請註明出處 一、過渡 過渡屬性 transition-property ：應用過渡的屬性，值為屬性，值為all時，所有有變化的屬性會有過渡效果 transition-dura

谷歌廣告Admob在cocos2dx上通過回調實現底部Banner

rac dea oncreate match orien googl sid onresume clu 首先說明我的開發平臺,以免由於平臺問題造成不必要的誤解： cocos2dx-3.4 ndk-r9d eclipse Admob是谷歌官方廣告，已經集成在google_

js通過一個方法實現對象的深淺拷貝。

str else xtend color extend log typeof ror defined 眾所周知，對象的深淺拷貝是工作中肯定會遇到的問題。所以，今天考慮寫個小的功能來記錄一下 //type:boolean,true-deep,true為深拷貝， functi

jquery+css3按鈕水波紋實現

fse pagex ase read image back -1 err ive html： 1 <div class="btn">確定</div> css： 1 @-webkit-keyframes waterripple { 2

用OpenGL實現跳躍的立體小球

運動 目的 class for sha 上下左右 span pen eof 一、目的 掌握OpenGL中顯示列表對象的使用方法。 二、示例代碼 #include "stdafx.h" #include <GL/glut.h> #include <cm

通過代碼實現自動判斷是手機端還是PC端跳轉

art con bag back indexof inf cati clas lan 1 <!-- 2017/09/13 跳轉手機頁面 start by 小鬼PSer --> 2 <meta name="mobile-agent" content="

在CentOS7上通過RPM安裝實現LAMP+phpMyAdmin過程全記錄

isp -s 管理工具 gpgcheck b2c link 5.5 art http 在CentOS7上通過RPM安裝實現LAMP+phpMyAdmin過程全記錄 時間：2017年9月20日 一、軟件環境： IP：192.168.1.71 Hostname：centos73