網上大都是正方體的效果,由於做乙個東西需要,寫了乙個html+css3實現的長方體,有需要的也可以看看。 2017-07-25 21:30:23
html**
1doctype html
>
2<
html
lang
="en"
>
3<
head
>
4<
meta
charset
="utf-8"
>
5<
title
>html+css3實現長方體效果
title
>
6<
link
rel="stylesheet"
href
="css/cuboid.css"
/>
7head
>
8<
body
>
9<
div
class
="square-box"
>
10<
div
class
="front"
>
div>
11<
div
class
="bottom"
>
div>
12<
div
class
="back"
>
div>
13<
div
class
="top"
>
div>
14<
div
class
="left"
>
div>
15<
div
class
="right"
>
div>
16div
>
17body
>
18html
>
css**
1.square-box
13.square-box>div
16/*
設定六面的視角
*/17
.square-box>.front
23.square-box>.bottom
29.square-box>.back
35.square-box>.top
41.square-box>.left
47.square-box>.right
53/*
新增動畫效果
*/54
@keyframes rotateanimation
58100%
61}
transform-style 屬性規定如何在 3d 空間中呈現被巢狀的元素。
取值:flat 子元素將不保留其 3d 位置。
preserve-3d 子元素將保留其 3d 位置。
檢視效果
製作出長方體後你可以再加些自己想要的特效,div中可插入什麼的會更好看些。
HTML CSS3 中的2D 3D和動畫效果
雖然我們我們在前端工作中,對於2d 3d和動畫效果一般來說都用不上,基本上都是用js或jq來完成這些動畫效果,但是最基礎的這些你是否已經忘記了呢?昨天重溫了一下這些東西,順手寫了兩個小例子 首先 在html中定義乙個div,只需要乙個div即可,我使用偽元素來畫出 通過以上 我們就得到了乙個紅紅火火...
c 實現長方體的面積和體積計算
c 實現長方體的面積和體積計算 一 知識體系 1 長方體的面積計算公式 s 2 a b b c c a 2 長方體的體積計算公式 v a b c 二 演算法實現 include using namespace std class cube double geta double getb double...
Flash與3D程式設計探秘(二) 靜態長方體
靜態長方體 那麼接著上一節所討論的內容,來製作乙個靜態的長方體,並且讓它在螢幕上來回的運動。這個例子和上一節的例子非常的相似,同樣主要關心3d空間。不同的是,上一節我們利用了乙個事先畫好的小球,這一節改變方式,在程式執行時,計算出長方體的每個頂點的位置然後使用flash的圖形api繪製出乙個長方體,...