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

2021-10-05 14:18:28 字數 1742 閱讀 6119

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標籤製作中間的小圓點,使用偽元素和子元素製作周邊的扇葉,背景顏色繼承父元素的顏色 但是小圓點的展示出來的背景顏色應該是輔助顏色...