html css3實現長方體效果

網上大都是正方體的效果，由於做乙個東西需要，寫了乙個html+css3實現的長方體，有需要的也可以看看。                   2017-07-25         21:30:23

html**

1

doctype 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繪製出乙個長方體，...