利用css製作正方體 三菱體

162231urxdwuw4wzor41g0

今天要分享的是如何用css來製作一個正方體和三菱體喔!其中主要都是用到css transform的這個元素來製作的,相當的酷喔~就讓我們一起來看看吧!

   CSS  的 transform 特性 (CSS properties) ,直接就可以旋轉、歪斜、放大、縮小、移動元素 (elements) 的 box,甚至 3D 的迴旋、透視。包括整個元素所有的內容也都隨之變形,不再侷限只能在僵硬的矩形框,對網頁排版及設計上會有很大的彈性和突破,而且對網頁正常的編排不會有相互排擠問題,一格黏接一格耗時費工的殘腦時代終將走入歷史。本篇僅先就 2D transform 的部分討論。

變形函數 2D transform-function (transformation functions)

函數括號內的角度 θ 參數必須有單位,可以是 deg (角度 ° ) 、 rad (弧度) 、 grad (梯度) ,大小寫都可接受; m, a, b, c, d, e, f 參數為數字,不需要單位; o 參數為合法的尺寸值 (length) 或 % (百分比) 。

rotate(θ)
指定元素以參考點為中心軸 2D 旋轉 θ 度。
skewX(θ)
指定元素以參考點為中心軸沿著橫向傾斜 θ 度。
skewY(θ)
指定元素以參考點為中心軸沿著縱向傾斜 θ 度。
skew(θxy)
指定元素以參考點為中心軸沿著橫向傾斜 θx 度、 縱向傾斜 θy 度。參數如果只指定 1 個,省略的第 2 個參數,會視為 0 ,也就是只有沿橫向傾斜。September 2012 W3C草書又復原此項
scaleX(m)
指定元素由參考點橫向縮放 m 倍。
scaleY(m)
指定元素由參考點縱向縮放 m 倍。
scale(mx,my)
指定元素由參考點 2D 橫向縮放 mx 倍、縱向縮放 my 倍,等於是結合 scaleX(mx), scaleY(my) 。參數如果只指定 1 個,省略的第 2 個參數,會等於第 1 個,也就是橫向、縱向以相同比例縮放。
translateX(o)
指定元素由參考點橫向移動 o 距離。
translateY(o)
指定元素由參考點縱向移動 o 距離。
translate(ox,oy)
指定元素由參考點 2D 橫向移動 ox 距離、縱向移動 oy 距離,等於是結合 translateX(ox), translateY(oy) 。參數如果只指定 1 個,省略的第 2 個參數,會視為 0 ,也就是只有橫向移動。
matrix(a,b,c,d,e,f)
指定元素由參考點依據數學變形矩陣 (transformation matrix) 的 6 個參數值產生 2D 變形。矩陣的目的主要在運算出四邊形四角的座標,屬於數學問題,這裡就不作太多討論了。事實上,前述的各項變形函數都是簡化這個矩陣而拆解出來的
文章來源:http://boohover.pixnet.net/blog/post/35341387#transform-origin

 

 

162231urxdwuw4wzor41g0

正方體

—————————————

<!doctype html>
<html>
<head>
<meta charset="utf-8″>
<title>CSS3正方体</title>
<style>
*{ margin:0; padding:0;}
body > div{ position:absolute; top:200px; z-index:5; left:200px; width:200px; border:1px solid #000;}
.box1{ height:100px;transform:skew(-45deg ); -webkit-transform:skew(-45deg); -moz-transform:skew(-45deg); }
.box2{ top:300px;left:150px; height:200px; border-top:none; }
.box3{ left:210px;top:300px; width:141px; height:140px; border-top:none; border-right:none; transform:rotateZ(-135deg) skewY(45deg); -webkit-transform:rotateZ(-135deg) skewY(45deg); -moz-transform:rotateZ(-135deg) skewY(45deg); transform-origin:top right; -webkit-transform-origin:top right; -moz-transform-origin:top RIGHT; }
.box4{z-index:3; top:400px; height:100px; border:none;border-top:1px dashed rgba(102,102,102,0.8); border-left:1px dashed rgba(102,102,102,0.8);transform:skew(-45deg ); -webkit-transform:skew(-45deg); -moz-transform:skew(-45deg);}
.box5{ z-index:3;left:250px; height:200px; border:none; border-left:1px dashed rgba(102,102,102,0.8); }
</style>
</head>

<body>
<div class="box1″></div>
<div class="box2″></div>
<div class="box3″></div>
<div class="box4″></div>
<div class="box5″></div>
</body>
</html>

—————————————

三菱體

—————————————

<!doctype html>
<html>
<head>
<meta charset="utf-8″>
<title>CSS3 三棱柱</title>
<style>
*{ margin:0; padding:0;}
body > div{ position:absolute; top:200px; z-index:5; left:200px; width:200px; }
.box{ height:200px;border:1px solid #000;}
.box1{ left:60px; top:400px; width:140px; height:140px; border: 1px dashed rgba(102,102,102,0.8); border-right:none; border-bottom:1px solid #000; transform:rotateZ(135deg) skewX(-45deg);-webkit-transform:rotateZ(135deg) skewX(-45deg); -moz-transform:rotateZ(135deg) skewX(-45deg); transform-origin:top right; -webkit-transform-origin:top right; -moz-transform-origin:top right;}
.box2{ left:400px; top:400px; width:140px; height:140px; border-top:1px dashed rgba(102,102,102,0.8); border-bottom:1px solid #000; transform:rotateZ(-135deg) skewX(45deg); -webkit-transform:rotateZ(-135deg) skewX(45deg); -moz-transform:rotateZ(-135deg) skewX(45deg); transform-origin:left top; -webkit-transform-origin:left top; -moz-transform-origin:left top;}
</style>
</head>

<body>
<div class="box"></div>
<div class="box1″></div>
<div class="box2″></div>
</body>
</html>

—————————————

文章來源:http://www.w3cfuns.com/blog-5395181-5400176.html

(這個網站可以線上做喔!)

廣告

發表迴響

在下方填入你的資料或按右方圖示以社群網站登入:

WordPress.com Logo

您的留言將使用 WordPress.com 帳號。 登出 / 變更 )

Twitter picture

您的留言將使用 Twitter 帳號。 登出 / 變更 )

Facebook照片

您的留言將使用 Facebook 帳號。 登出 / 變更 )

Google+ photo

您的留言將使用 Google+ 帳號。 登出 / 變更 )

連結到 %s