Home > Developer > Web Develop
Most of the online is the effect of the cube, due to do a thing need to write a HTML+CSS3 realization of the box, there is a need to see. 2017-07-25 21:30:23
HTML code
1 <!DOCTYPE HTML>2 <HTMLLang= "en">3 <Head>4 <MetaCharSet= "UTF-8">5 <title>HTML+CSS3 Implementing a cuboid effect</title>6 <Linkrel= "stylesheet"href= "Css/cuboid.css" />7 </Head>8 <Body>9 <Divclass= "Square-box">Ten <Divclass= "Front"></Div> One <Divclass= "Bottom"></Div> A <Divclass= "Back"></Div> - <Divclass= "Top"></Div> - <Divclass= "Left"></Div> the <Divclass= "Right"></Div> - </Div> - </Body> - </HTML>
CSS Code
1 . Square-box{2 width:200px;3 Height:100px;4 box-sizing:Border-box;5 position:relative;6 Transform-style:preserve-3d;7 /*Animated Three are: Animation name execution time execution mode*/8 Animation:rotateanimation 5s Ease;9 Animation-iteration-count:Infinite;/*make the animation run indefinitely*/Ten animation-timing-function:Linear;/*constant Speed*/ One margin:200px Auto; A} - . Square-box>div{ - position:Absolute; the} - /*set six-side perspective*/ - . Square-box>.front{ - width:200px; + Height:100px; - Transform:Translatez (50px); + background:Red; A} at . Square-box>.bottom{ - width:200px; - Height:100px; - Transform:Rotatex (270deg) Translatez (50px); - background:Deeppink; -} in . Square-box>.back{ - width:200px; to Height:100px; + Transform:Translatez ( -50px); - background:Darkcyan; the} * . Square-box>.top{ $ width:200px;Panax Notoginseng Height:100px; - Transform:Rotatex (90deg) Translatez (50px); the background:Yellow; +} A . Square-box>.left{ the width:100px; + Height:100px; - Transform:Rotatey (270deg) Translatez (50px); $ background:Black; $} - . Square-box>.right{ - width:100px; the Height:100px; - Transform:Rotatey (90deg) Translatez (150px);Wuyi background:#a7cbf0; the} - /*Add an animation effect*/ Wu @keyframes rotateanimation{ - 0%{ About Transform:Rotatex (0deg) Rotatey (0deg) Rotatez (0deg); $} - 100%{ - Transform:Rotatex (360deg) Rotatey (360deg) Rotatez (360deg); -} A }
The Transform-style property specifies how nested elements are rendered in 3D space.
Value:
the flat child element will not retain its 3D position.
the preserve-3d child element retains its 3D position.
View Effects
After making the box you can add some of the special effects you want, the div can be inserted into the picture or something more beautiful.
Html+css3 to implement box effects
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
