這篇文章主要介紹“CSS3中3D環(huán)境實現(xiàn)立體的魔方效果代碼分享”,在日常操作中,相信很多人在CSS3中3D環(huán)境實現(xiàn)立體的魔方效果代碼分享問題上存在疑惑,小編查閱了各式資料,整理出簡單好用的操作方法,希望對大家解答”CSS3中3D環(huán)境實現(xiàn)立體的魔方效果代碼分享”的疑惑有所幫助!接下來,請跟著小編一起來學習吧!
成都網站制作,成都營銷型網站-成都創(chuàng)新互聯(lián)公司科技公司專注營銷型網站建設及定制型網站開發(fā)。致力為您建設最有價值的網站,服務熱線:18980820575。
section{width: 100px;height:100px;border:5px solid red; margin:50px auto;padding:100px;perspective: 800px;}
.box {width:100px;height:100px;position:relative;
transform-style:preserve-3d;
transition:4S;
transform-origin:center center -50px;
}
.box div{width: 100px;height:100px;position:absolute;color:white;font-size:50px;text-align: center;line-height:100px;}
.box div:nth-of-type(1){
background: #FF6600;;
transform:translateX(-100px) rotateY(-90deg);
transform-origin:right;
}
.box div:nth-of-type(2){
background:red ;
transform:translateY(-100px) rotateX(90deg);
transform-origin:bottom ;
}
.box div:nth-of-type(3){
background:darkviolet;
transform:translateX(100px) rotateY(90deg);
transform-origin:left;
}
.box div:nth-of-type(4){
background:yellow;
transform: translateY(100px) rotateX(-90deg) ;
transform-origin:top;
}
.box div:nth-of-type(5){
background:green;
transform:translateZ(-100px) rotateY(180deg);
}
.box div:nth-of-type(6){
background:blue;
}
section:hover .box{
transform: rotateX(270deg) rotateY(-270deg) rotateX(-270deg) rotateY(270deg) ;
}
到此,關于“CSS3中3D環(huán)境實現(xiàn)立體的魔方效果代碼分享”的學習就結束了,希望能夠解決大家的疑惑。理論與實踐的搭配能更好的幫助大家學習,快去試試吧!若想繼續(xù)學習更多相關知識,請繼續(xù)關注創(chuàng)新互聯(lián)網站,小編會繼續(xù)努力為大家?guī)砀鄬嵱玫奈恼拢?/p>
另外有需要云服務器可以了解下創(chuàng)新互聯(lián)scvps.cn,海內外云服務器15元起步,三天無理由+7*72小時售后在線,公司持有idc許可證,提供“云服務器、裸金屬服務器、高防服務器、香港服務器、美國服務器、虛擬主機、免備案服務器”等云主機租用服務以及企業(yè)上云的綜合解決方案,具有“安全穩(wěn)定、簡單易用、服務可用性高、性價比高”等特點與優(yōu)勢,專為企業(yè)上云打造定制,能夠滿足用戶豐富、多元化的應用場景需求。