No 5 純 CSS 製作繞中軸旋轉的立方體

bodymain.cube.cube>div.cube>div:nth-child(1).cube>div:nth-child(2).cube>div:nth-child(3).cube>div:nth-child(4).cube>div:nth-child(5).cube>div:nth-child(6)@keyframes spin}

.cube:hover

doctype html
>
<
html
>
<
head
>
<
meta 
charset
="utf-8"
>
<
title
>純 css 製作繞中軸旋轉的立方體
title
>
<
link 
rel="stylesheet"
href
="style.css"
>
head
>
<
body
>
<
main
>
<
div 
class
="cube"
>
<
div>
div>
<
div>
div>
<
div>
div>
<
div>
div>
<
div>
div>
<
div>
div>
div>
main
>
body
>
html
>

劃重點①給多個元素absolute形成重疊

②transform: rotatey(180deg) translatez(200px);和transform: translatez(200px)  rotatey(180deg);

先後的不同，有巨大區別！

.cube>div:nth-child(1).cube>div:nth-child(2).cube>div:nth-child(3).cube>div:nth-child(4).cube>div:nth-child(5).cube>div:nth-child(6)

先在中點進行旋轉，隨後分別向各自變化後的z方向推進200px；

而不是集體推進200px後在中點進行旋轉。

③margin:200px auto 0px;

④3d舞台元素對視角的作用決定性（乙個類似body的大背景座位舞台元素起到對螢幕更真實的效果）

animation: name duration timing-function delay iteration-count direction;

animation-play-state: paused;
animation-play-state: running;

@keyframes myfirst

25%  50%  75%  100% }

.cube:hover

No 5 純 CSS 製作繞中軸旋轉的立方體

bodymain.cube.cube div.cube div nth child 1 cube div nth child 2 cube div nth child 3 cube div nth child 4 cube div nth child 5 cube div nth child 6 k...

純css 製作簡單的愛心

網頁中我們用到愛心 的地方不少，如看到一篇喜歡的文章給他點個贊，表白你喜歡的女孩，給他比個小心心什麼的。今天用純css寫乙個簡單的愛心。簡單思路如下 1.先做乙個盒子，裡面包含兩個小盒子 2.兩個小盒子弄成一樣大小的長方形 3.通過border radius transform，進行調整，整合成乙個...

純css3 偽元素製作旋轉小風扇

製作旋轉的小風扇，並且顏色是可以改變的 只用乙個標籤來承載風扇，並且顏色可以任意更改，所以只能有乙個標籤明碼定義顏色 控制旋轉只要在該標籤上新增動畫即可 所以只用乙個span標籤製作中間的小圓點，使用偽元素和子元素製作周邊的扇葉，背景顏色繼承父元素的顏色 但是小圓點的展示出來的背景顏色應該是輔助顏色...