首頁(yè) 猿問(wèn) ?css3定義3d場(chǎng)景的代碼是什么

?css3定義3d場(chǎng)景的代碼是什么

CSS3

qq_毅往情深_0 2016-09-20 21:13:38

css3定義3d場(chǎng)景的代碼是什么

查看完整描述

2 回答

stone310

TA貢獻(xiàn)361條經(jīng)驗(yàn) 獲得超191個(gè)贊

transform-style:?preserve-3d;//定義為3d

perspective:?800;//視距

以上是舞臺(tái)定義；

具體實(shí)現(xiàn)則有

transform:rotate3d，//旋轉(zhuǎn)

scale3d，//3d縮放

transform:translate3d，//3d方向(x,y,z)移動(dòng)；

backface-visibility，//定義3d圖形背面是否可見(jiàn)；

transition， //過(guò)渡效果

animate，//制作幀動(dòng)畫(huà)效果

反對(duì) 回復(fù) 2016-09-21

OlderSkee

TA貢獻(xiàn)123條經(jīng)驗(yàn) 獲得超103個(gè)贊

只是說(shuō)html5有個(gè)3d ?場(chǎng)景吧。。

css3 有個(gè)旋轉(zhuǎn) 類(lèi)似3d效果

? ?<style>
? ? ? ?* {
? ? ? ? ? ?margin: 0;
? ? ? ? ? ?padding: 0;
? ? ? ?}

? ? ?
? ? ? ?body {
? ? ? ? ??
? ? ? ? ? ?background-color: #FFF;
? ? ? ?}

? ? ? ?#imgg {
? ? ? ? ? ?animation: imgg 1s linear 0s infinite;
? ? ? ?}

? ? ? ?@keyframes imgg {
? ? ? ? ? ?0% {
? ? ? ? ? ? ? ?transform: rotateY(0deg);
? ? ? ? ? ?}
? ? ? ? ? ?25% {
? ? ? ? ? ? ? ?transform: rotateY(90deg);
? ? ? ? ? ?}
? ? ? ? ? ?50% {
? ? ? ? ? ? ? ?transform: rotateY(180deg);
? ? ? ? ? ?}
? ? ? ? ? ?75% {
? ? ? ? ? ? ? ?transform: rotateY(270deg);
? ? ? ? ? ?}
? ? ? ? ? ?100% {
? ? ? ? ? ? ? ?transform: rotateY(360deg);
? ? ? ? ? ?}
? ? ? ?}
? ?</style>

? ??

<body>
<div id="demo">
? ?<img src="images/01.jpg" alt="" width="100" height="100" id="imgg">
</div>

</body>