CSS学习记录9/3D的正方体的两种编写方式/3D长方体的编写方式/3D动画/3D播放器
生活随笔
收集整理的這篇文章主要介紹了
CSS学习记录9/3D的正方体的两种编写方式/3D长方体的编写方式/3D动画/3D播放器
小編覺得挺不錯的,現(xiàn)在分享給大家,幫大家做個參考.
什么是2D什么是3D？
2D就是一個平面，只是寬度和高度，沒有厚度。
3D就是一個立體，有寬度有高度，還有厚度。
默認(rèn)情況下所有的元素都是呈2D展現(xiàn)的。
如何讓某個元素呈3D展現(xiàn)？
和透視一樣，只需給該元素的父元素添加一個transform-style屬性，然后設(shè)置為preserve-3d即可。
正方體第一種方案：
ul{width: 200px;height: 200px;border: 1px solid #000;box-sizing: border-box;margin: 100px auto;position: relative;transform: rotateY(0deg) rotateX(0deg);transform-style: preserve-3d;}ul li{list-style: none;width: 200px;height: 200px;font-size: 60px;text-align: center;line-height: 200px;position: absolute;left: 0;top: 0;}ul li:nth-child(1){background-color: #ffada3;transform: translate(-100px) rotateY(90deg);}ul li:nth-child(2){background-color: #ffcaf3;transform: translate(100px) rotateY(90deg);}ul li:nth-child(3){transform: translateY(100px) rotateX(90deg);background-color: #cdcdcd;}ul li:nth-child(4){transform: translateY(-100px) rotateX(90deg);background-color: #67676d;}ul li:nth-child(5){transform: translateZ(-100px);background-color: cornflowerblue;}ul li:nth-child(6){transform: translateZ(100px);background-color: greenyellow;}
正方體第二種方案：前后上下內(nèi)容不會翻轉(zhuǎn)。
如何做一個長方體？
先做一個正方體，給需要拉寬的面設(shè)置scale參數(shù)。
例：scale(1.5,1)
3D動畫：
<!DOCTYPE html> <html lang="en"> <head><meta charset="UTF-8"><title>Title</title><style>body,div,dl,dt,dd,ul,ol,li,h1,h2,h3,h4,h5,h6,pre,form,fieldset,input,textarea,p,blockquote,th,td {padding: 0;margin: 0;}body{perspective: 500px;/*近大遠小的效果*/}ul{width: 200px;height: 200px;box-sizing: border-box;margin: 100px auto;position: relative;transform: rotateY(0deg) rotateX(0deg);transform-style: preserve-3d;animation: move 5s linear 0s infinite normal;}@keyframes move {from{transform: rotateX(0deg);}to{transform: rotateX(360deg);}}ul li{list-style: none;width: 200px;height: 200px;font-size: 60px;text-align: center;line-height: 200px;position: absolute;left: 0;top: 0;}ul li img{width: 200px;height: 200px;/*只要父元素被拉伸了子元素也會被拉伸*/}ul li:nth-child(1){transform: rotateX(90deg) translateZ(100px) scale(1.5,1);}ul li:nth-child(2){transform: rotateX(180deg) translateZ(100px) scale(1.5,1);}ul li:nth-child(3){transform: rotateX(270deg) translateZ(100px) scale(1.5,1);}ul li:nth-child(4){transform: rotateX(360deg) translateZ(100px) scale(1.5,1);}ul li:nth-child(5){transform: translateX(-200px) rotateY(90deg);}ul li:nth-child(6){transform: translateX(200px) rotateY(90deg);}/*上、后、下、前分別繞X軸旋轉(zhuǎn)90度、180度、270度、360度然后沿Z軸平移100像素*//*長方體，給需要拉寬的面設(shè)置scale參數(shù)*/</style> </head> <body> <ul><li><img src="images/tp1"></li><li><img src="images/tp2"></li><li><img src="images/tp3"></li><li><img src="images/tp4"></li><li></li><li></li> </ul> </body> </html>效果：
3D播放器：
結(jié)果：動畫在主頁視頻里
總結(jié)
以上是生活随笔為你收集整理的CSS学习记录9/3D的正方体的两种编写方式/3D长方体的编写方式/3D动画/3D播放器的全部內(nèi)容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： 散户炒股七大绝招 巨额获利风险小 (网摘
- 下一篇： 原生JS实现简单打砖块弹球小游戏