css3怎么實(shí)現(xiàn)簡(jiǎn)單的立方體

這篇文章主要介紹“css3怎么實(shí)現(xiàn)簡(jiǎn)單的立方體”的相關(guān)知識(shí)，小編通過(guò)實(shí)際案例向大家展示操作過(guò)程，操作方法簡(jiǎn)單快捷，實(shí)用性強(qiáng)，希望這篇“css3怎么實(shí)現(xiàn)簡(jiǎn)單的立方體”文章能幫助大家解決問(wèn)題。

站在用戶的角度思考問(wèn)題，與客戶深入溝通，找到通江網(wǎng)站設(shè)計(jì)與通江網(wǎng)站推廣的解決方案，憑借多年的經(jīng)驗(yàn)，讓設(shè)計(jì)與互聯(lián)網(wǎng)技術(shù)結(jié)合，創(chuàng)造個(gè)性化、用戶體驗(yàn)好的作品，建站類型包括：成都網(wǎng)站建設(shè)、成都網(wǎng)站制作、企業(yè)官網(wǎng)、英文網(wǎng)站、手機(jī)端網(wǎng)站、網(wǎng)站推廣、域名注冊(cè)、網(wǎng)站空間、企業(yè)郵箱。業(yè)務(wù)覆蓋通江地區(qū)。

寫一個(gè)簡(jiǎn)單的立方體

1、我們先用css實(shí)現(xiàn)一個(gè)長(zhǎng)方體,一個(gè)長(zhǎng)方體有6個(gè)邊,我們寫6個(gè)li,并用一個(gè)ul包裹起來(lái),根據(jù)我寫3D動(dòng)畫的經(jīng)驗(yàn),最好有一個(gè)父元素來(lái)包裹

123456

2、先給.parent設(shè)置寬高,并且給他設(shè)置視距和基點(diǎn)位置..parent{

width: 800px;

height: 400px;

border: 1px solid #000;

margin: 0 auto;

perspective: 2000px;

perspective-origin: -40% -80%;

background: #000;

}

3、給ul設(shè)置寬高以及preserve-3d屬性保留子元素3d轉(zhuǎn)換,子元素li全部絕對(duì)定位ul{

width: 50px;

position: relative;

margin: 100px auto;

transform-style : preserve-3d;

}

li{

width: 100px;

height: 100px;

background: rgba(255, 255, 0, 0.3);

position: absolute;

text-align: center;

border: 3px solid greenyellow;

}

效果如下圖所示:

4、先寫一個(gè)面,給他的背景設(shè)置 background: rgba(255, 255, 0, 0.3);li:nth-child(1){

background: rgba(255, 255, 0, 0.3);

transform: translateY(50px) rotateX(90deg);

}

效果如下圖所示:

5、我們寫好了第一個(gè)面,然后我們?cè)趯⑵渌?個(gè)面調(diào)整好,變成下圖所示.關(guān)于rotate的旋轉(zhuǎn)方向這里不解釋,不懂的朋友可以自行查看其他文檔.

li:nth-child(1){

transform: translateY(-50px) rotateX(90deg);

}

li:nth-child(2){

transform: translateY(50px) rotateX(90deg);

}

li:nth-child(3){

transform: translateX(-50px) rotateY(90deg);

}

li:nth-child(4){

transform: translateX(50px) rotateY(90deg);

}

li:nth-child(5){

transform: translateZ(50px);

}

li:nth-child(6){

transform: translateZ(-50px);

}

效果如下圖所示:

下面是兩種css3D+動(dòng)畫的效果

1、代碼如下:

書頁(yè)2

.container{

width: 1000px;

height: 650px;

background: #000;

perspective: 2000px;

border: 1px solid transparent;

overflow: hidden;

margin: 0 auto;

perspective-origin: 10% 20%;

}

.cube{

width: 200px;

height: 300px;

transform-style: preserve-3d;

margin:100px auto;

position: relative;

transform: rotateX(30deg);

border-radius: 50%;

padding: 60px;

}

.mian{

width: 200px;

height: 300px;

background-image: url(1.jpg);

background-position:400px 0;

position: absolute;

border: 1px solid #ccc;

transition: 2s;

}

.mian1{

transform-origin: right;

transform: translateX(-200px) rotateY(45deg);

background-position: 0 0;

}

.mian3{

transform-origin: left;

transform: translateX(200px) rotateY(45deg);

background-position: 200px 0;

}

.mian3:hover{

transform: translateX(200px) rotateY(0deg);

}

.mian1:hover{

transform: translateX(-200px) rotateY(0deg);

}

2、代碼如下:

立方體

*{

margin: 0;

padding: 0;

list-style: none;

}

.parent{

width: 1000px;

margin: 0 auto;

height: 600px;

background: black;

perspective: 5000px;

perspective-origin: -40% -120%;

border: 1px solid #000;

}

ul{

width: 100px;

height: 300px;

position: relative;

margin:100px auto;

transform-style: preserve-3d;

animation: zuan 3s linear infinite;

border: 1px solid greenyellow;

}

li{

width: 100px;

height: 300px;

background: rgba(0, 0, 0, 0.5);

position: absolute;

text-align: center;

line-height: 100px;

border: 3px solid greenyellow;

}

li:nth-child(1){

transform: rotateY(30deg) translateZ(-200px);

}

li:nth-child(2){

transform: rotateY(60deg) translateZ(-200px);

background: rgba(255, 0, 0, 0.5);

}

li:nth-child(3){

transform: rotateY(90deg) translateZ(-200px);

}

li:nth-child(4){

transform: rotateY(120deg) translateZ(-200px);

background: rgba(0, 0, 255, 0.5);

}

li:nth-child(5){

transform: rotateY(150deg) translateZ(-200px);

}

li:nth-child(6){

transform: rotateY(180deg) translateZ(-200px);

background: rgba(255, 0, 255, 0.5);

}

li:nth-child(7){

transform: rotateY(210deg) translateZ(-200px);

}

li:nth-child(8){

transform: rotateY(240deg) translateZ(-200px);

background: rgba(0, 255, 0, 0.5);

}

li:nth-child(9){

transform: rotateY(270deg) translateZ(-200px);

}

li:nth-child(10){

transform: rotateY(300deg) translateZ(-200px);

background: rgba(0, 255, 255, 0.5);

}

li:nth-child(11){

transform: rotateY(330deg) translateZ(-200px);

}

li:nth-child(12){

transform: rotateY(360deg) translateZ(-200px);

background: rgba(255, 255, 255, 0.5);

}

@keyframes zuan{

0%{

transform: rotateY(0deg);

}

100%{

transform: rotateY(360deg);

}

}

關(guān)于“css3怎么實(shí)現(xiàn)簡(jiǎn)單的立方體”的內(nèi)容就介紹到這里了，感謝大家的閱讀。如果想了解更多行業(yè)相關(guān)的知識(shí)，可以關(guān)注創(chuàng)新互聯(lián)行業(yè)資訊頻道，小編每天都會(huì)為大家更新不同的知識(shí)點(diǎn)。

新聞標(biāo)題：css3怎么實(shí)現(xiàn)簡(jiǎn)單的立方體
地址分享：http://muchs.cn/article22/jopjjc.html

成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián)，為您提供網(wǎng)站內(nèi)鏈、關(guān)鍵詞優(yōu)化、網(wǎng)站營(yíng)銷、定制網(wǎng)站、網(wǎng)站制作、小程序開發(fā)

廣告

聲明：本網(wǎng)站發(fā)布的內(nèi)容（圖片、視頻和文字）以用戶投稿、用戶轉(zhuǎn)載內(nèi)容為主，如果涉及侵權(quán)請(qǐng)盡快告知，我們將會(huì)在第一時(shí)間刪除。文章觀點(diǎn)不代表本網(wǎng)站立場(chǎng)，如需處理請(qǐng)聯(lián)系客服。電話：028-86922220；郵箱：631063699@qq.com。內(nèi)容未經(jīng)允許不得轉(zhuǎn)載，或轉(zhuǎn)載時(shí)需注明來(lái)源： 創(chuàng)新互聯(lián)