首頁猿問 ?css3定義3d場景的代碼是什么

?css3定義3d場景的代碼是什么

CSS3

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

css3定義3d場景的代碼是什么

查看完整描述

2 回答

stone310

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

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

perspective:?800;//視距

以上是舞臺定義；

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

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

scale3d，//3d縮放

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

backface-visibility，//定義3d圖形背面是否可見；

transition， //過渡效果

animate，//制作幀動畫效果

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

OlderSkee

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

只是說html5有個3d ?場景吧。。

css3 有個旋轉(zhuǎn) 類似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>