Home > Developer > Web Develop
CSS3 Design 3D
Use the warp, scale, and skew in the CSS3.
Only the compatible gecto are written. Send picture to encourage yourself
<!DOCTYPE HTML><HTML><Head> <MetaCharSet= "Utf-8"> <title></title> <style>. Cube{position:fixed; Left:50%;Top:12px; }. Cube P{Line-height:144px;font-size:12px; }. Cube H2{Font-weight:Bold; }. Cube.one{Top:200px; Left:50%;Margin-left:-200px; }. Topface,. Leftface,. Rightface Div/*uniform dimensions on three sides*/ {width:272px;Height:262px;padding:10px; }. Topface,. Leftface, Rightface/*Unified Tri-elevation absolute positioning*/ {position:Absolute; }. Cube:hover. Topface,. Cube:hover. Leftface,. Cube:hover. Rightface{background:#ffc; }. Cube:hover. Topface:hover,. Cube:hover. Leftface:hover,. Cube:hover. Rightface:hover{background:#ffa; }. Leftface/*Deform left*/ {-moz-transform:skew (0deg,30deg) scale (0.95,0.95);background:#ccc;Top:85px; Left:-60px; }. Rightface{-moz-transform:skew (0deg,-30deg) scale (1,0.95); /*Morph Front*/background:#ddd;position:Absolute; Left:222px;Top:80px; }. Topface Div/*deform top Face*/ {-moz-transform:skew (0deg,-30deg) scale (1,1.16);background:#eee;font-size:0.862em; }. Topface{-moz-transform:Rotate (60deg);Top:-150px; Left:115px; } </style></Head><Body><Divclass= "Cube One"> <Divclass= "Topface"> <Div> <H2>Top Face</H2> <P><imgsrc= "Images/oversea01.jpg"></P> </Div> </Div> <Divclass= "Leftface"> <Div> <H2>Left</H2> <P><imgsrc= "Images/oversea02.jpg"></P> </Div> </Div> <Divclass= "Rightface"> <Div> <H2>Positive</H2> <P><imgsrc= "Images/oversea03.jpg"></P> </Div> </Div></Div></Body></HTML>View Code
CSS3 's design dynamic stereoscopic box
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
