Home > Developer > Web Develop
<!DOCTYPE HTML><HTMLLang= "en"><Head> <MetaCharSet= "UTF-8"> <title></title></Head><style>*{margin:0;padding:0;}Ul,li{List-style:None;}. Wrap{width:200px;Height:200px;Border:1px solid Blue;margin:150px Auto;Perspective:500px;}. Box{width:150px;Height:150px;position:relative;Transform-origin:Center Center 75px;Transform-style:preserve-3d;transition:1s;}. Box Li{width:150px;Height:150px;position:Absolute;text-align:Center;Line-height:150px;}. Box Li:nth-of-type (1){background:Blue; Left:-150px;Transform-origin: Right;Transform:Rotatey (90deg);}. Box Li:nth-of-type (2){background:Red; Left:150px;Transform-origin: Left;Transform:Rotatey ( -90deg);}. Box Li:nth-of-type (3){background:Gray;Top:150px;Transform-origin:Top;Transform:Rotatex (90deg);}. Box Li:nth-of-type (4){background:Pink;Top:-150px;Transform-origin:Bottom;Transform:Rotatex ( -90deg);}. Box Li:nth-of-type (5){background:Purple;Transform:Translatez (150px);}. Box Li:nth-of-type (6){background:Green;Z-index:-1;}</style><Body> <Divclass= "Wrap"> <ulclass= "box"> <Li>1</Li> <Li>2</Li> <Li>3</Li> <Li>4</Li> <Li>5</Li> <Li>6</Li> </ul> </Div></Body></HTML><Script> varNum= 0; varOBox=Document.queryselector ('. Box'); SetInterval (function() {num--; OBox.style.transform='Rotatey ('+Num* -+'deg)'; }, the);</Script>
CSS3 3D Box Model
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
