doctype html
>
<
html
lang
="en"
>
<
head
>
<
meta
charset
="utf-8"
/>
<
meta
name
="viewport"
content
="width=device-width, initial-scale=1.0"
/>
<
title
>create effect of 3d
title
>
<
style
>
*#my3d
.page-group
.page
.page1
.page2,.page3,.page4,.page5,.page6
#op,.think
style
>
head
>
<
body
>
<
div
id="my3d"
>
<
div
class
="page-group"
>
<
div
class
="page page1"
>1
div>
<
div
class
="page page2"
>2
div>
<
div
class
="page page3"
>3
div>
<
div
class
="page page4"
>4
div>
<
div
class
="page page5"
>5
div>
<
div
class
="page page6"
>6
div>
div>
div>
<
div
id="op"
>
<
button
onclick
="next()"
>next
button
>
<
button
onclick
="previous()"
>previous
button
>
div>
<
br><
br>
<
hr>
<
br><
br>
<
div
class
="think"
>
<
h4>思路
h4>
<
br>
<
p>page1一開始鋪在螢幕上，其他的頁面橫向的鋪在螢幕裡面
p>
div>
<
script
>
let curindex =1
;
function
next()
let curpage
=document.queryselector(
".page"+
curindex);
//當前頁面向前方 90°
curpage.style.webkittransform ="
rotatex(-90deg)
"curindex
++//
下乙個頁面向前 90°
let nextpage
=document.queryselector(
".page"+
curindex)
nextpage.style.webkittransform ="
rotatex(0deg)"}
function
previous()
let curpage
=document.queryselector(
".page"+
curindex);
//當前頁面向前方 90°
curpage.style.webkittransform ="
rotatex(90deg)
"curindex
--//
下乙個頁面向前 90°
let nextpage
=document.queryselector(
".page"+
curindex)
nextpage.style.webkittransform ="
rotatex(0deg)"}
script
>
body
>
html
>
來自 ：
CSS 深入 3D 動畫
web 技術飛速發展，但是絕大數技術人員並沒有跟上其腳步，博主就是其中一員。當我們還在琢磨上一代技術時，那些技術前沿的弄潮兒開始打造新一代技術。這裡聊一聊非高頻卻十分炫酷的 3d 技術，使用 css3 即可實現。在說到三維之前，我們先聊一聊二維。二維很好理解，即平面。我們使用 x 軸和 y 軸就可以...
純css實現3D動畫
css動畫的某些屬性可以實現非常炫酷的3d效果，貼出乙個例子，可直接看到效果，用到了css的3d轉換和動畫。doctype html html head meta charset utf 8 meta name viewport content width device width,initial ...
CSS3動畫 3D旋轉
學了c3之後，簡單做了乙個3d旋轉的小demo.個人親猜測相容chrome firefox opera safari，沒有考慮ie。如果下面 有問題，可以在我的github檢視源 可以檢視網頁效果demo位址。如下 ccs3animation 3drotatetitle charset utf 8 ...