這篇文章主要介紹了Css3怎么實(shí)現(xiàn)圖片空間旋轉(zhuǎn)的相關(guān)知識，內(nèi)容詳細(xì)易懂，操作簡單快捷，具有一定借鑒價(jià)值，相信大家閱讀完這篇Css3怎么實(shí)現(xiàn)圖片空間旋轉(zhuǎ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è)計(jì)制作、成都做網(wǎng)站、企業(yè)官網(wǎng)、英文網(wǎng)站、手機(jī)端網(wǎng)站、網(wǎng)站推廣、域名注冊、網(wǎng)頁空間、企業(yè)郵箱。業(yè)務(wù)覆蓋月湖地區(qū)。

transform-style：屬性規(guī)定如何在 3D空間中呈現(xiàn)被嵌套的元素。

animation：用于設(shè)置六個(gè)動畫屬性{

animation-name 規(guī)定需要綁定到選擇器的 keyframe名稱。

animation-duration規(guī)定完成動畫所花費(fèi)的時(shí)間，以秒或毫秒計(jì)。

animation-timing-function 規(guī)定動畫的速度曲線。

animation-delay規(guī)定在動畫開始之前的延遲。

animation-iteration-count 規(guī)定動畫應(yīng)該播放的次數(shù)。

animation-direction  規(guī)定是否應(yīng)該輪流反向播放動畫。

}

html代碼：

css代碼

#logos

{

position: relative;

margin: 0 auto;

-webkit-perspective: 822px;

perspective: 822px;

}

#cube

{

display: block;

position: relative;

margin: 30px auto;

height: 200px;

width: 200px;

-webkit-transform-style: preserve-3d;

-webkit-transform: rotateX(-5deg) translateX(8px);

transform-style: preserve-3d;

transform: rotateX(-5deg) translateX(8px);

}

#front

{

position: absolute;

height: 200px;

width: 200px;

-webkit-backface-visibility: visible;

-webkit-transform: translateZ(100px);

backface-visibility: visible;

transform: translateZ(100px);

}

#back

{

position: absolute;

height: 200px;

width: 200px;

-webkit-backface-visibility: visible;

backface-visibility: visible;

-webkit-transform: rotateY(180deg) translateZ(100px);

transform: rotateY(180deg) translateZ(100px);

}

#cube

{

-webkit-animation: rotateGif 5s infinite linear;

animation: rotateGif 5s infinite linear;

}

@-webkit-keyframes rotateGif

{

0%

{

-webkit-transform: rotateY(0);

}

100%

{

-webkit-transform: rotateY(360deg);

}

}

@keyframes rotateGif

{

0%

{

transform: rotateY(0);

}

100%

{

transform: rotateY(360deg);

}

}

#xaxis

{

-moz-transform-style: preserve-3d;

-moz-transform: translate3d(-100px,0,0);

-webkit-transform-style: preserve-3d;

-webkit-transform: translate3d(-100px,0,0);

-ms-transform-style: preserve-3d;

-ms-transform: translate3d(-100px,0,0);

-o-transform-style: preserve-3d;

-o-transform: translate3d(-100px,0,0);

transform-style: preserve-3d;

transform: translate3d(-100px,0,0);

border-bottom: black 1px solid;

color: blue;

width: 400px;

display: block;

position: absolute;

top: 100px;

height: 1px;

}

#yaxis

{

-moz-transform-style: preserve-3d;

-moz-transform: rotateZ(-90deg) translate3d(0,-100px,0);

-webkit-transform-style: preserve-3d;

-webkit-transform: rotateZ(-90deg) translate3d(0,-100px,0);

-ms-transform-style: preserve-3d;

-ms-transform: rotateZ(-90deg) translate3d(0,-100px,0);

-o-transform-style: preserve-3d;

-o-transform: rotateZ(-90deg) translate3d(0,-100px,0);

transform-style: preserve-3d;

transform: rotateZ(-90deg) translate3d(0,-100px,0);

border-bottom: green 1px solid;

color: green;

width: 400px;

display: block;

position: absolute;

top: 100px;

height: 1px;

}

#zaxis

{

-moz-transform-style: preserve-3d;

-moz-transform: rotateY(90deg) translate3d(0,0,-100px);

-ms-transform-style: preserve-3d;

-ms-transform: rotateY(90deg) translate3d(0,0,-100px);

-webkit-transform-style: preserve-3d;

-webkit-transform: rotateY(90deg) translate3d(0,0,-100px);

-o-transform-style: preserve-3d;

-o-transform: rotateY(90deg) translate3d(0,0,-100px);

transform-style: preserve-3d;

transform: rotateY(90deg) translate3d(0,0,-100px);

border-bottom: red 1px solid;

color: red;

width: 400px;

display: block;

position: absolute;

top: 100px;

height: 1px;

}

關(guān)于“Css3怎么實(shí)現(xiàn)圖片空間旋轉(zhuǎn)”這篇文章的內(nèi)容就介紹到這里，感謝各位的閱讀！相信大家對“Css3怎么實(shí)現(xiàn)圖片空間旋轉(zhuǎn)”知識都有一定的了解，大家如果還想學(xué)習(xí)更多知識，歡迎關(guān)注創(chuàng)新互聯(lián)行業(yè)資訊頻道。