CSS3 implementation of Cube rotation
1 <!DOCTYPE HTML>2 <HTMLLang= "en">3 <Head>4 <MetaCharSet= "UTF-8">5 <title>Cube rotation</title>6 <style>7 . Box{8 width:250px;9 Height:250px;Ten Border:1px dashed Red; One margin:100px Auto; A position:relative; - Transform-style:preserve-3d; - Border-radius:50%; the /*Transform:rotatex (30deg) Rotatey ( -30deg);*/ - - Animation: gun 8s linear infinite; - } + . Box>div{ - width:100%; + Height:100%; A position:Absolute; at text-align:Center; - Line-height:250px; - font-size:60px; - Color:Green; - } - . Left{ in Background-color:Rgba (255,0,0,0.3); - /*Transform Center*/ to transform-origin: left; + /*Transformations*/ - transform:rotatey (90deg) TranslateX ( -125px); the } * . Right{ $ Background-color:Rgba (0,0,255,0.3);Panax Notoginseng transform-origin: right; - transform: rotatey (90deg) TranslateX (125px); the } + . Forward{ A Background-color:Rgba (0,255,255,0.3); the transform: Translatez (125px); + } - . Back{ $ Background-color:Rgba (255,255,0,0.3); $ transform: Translatez ( -125px); - } - . up{ the Background-color:Rgba (99,66,33,0.3); - transform: Rotatex (90deg) Translatez (125px); Wuyi } the . Down{ - Background-color:Rgba (255,0,255,0.3); Wu transform: Rotatex ( -90deg) Translatez (125px); - } About @keyframes Gun{ $ 0%{ - Transform:Rotatex (0deg) Rotatey (0deg); - } - 100%{ A Transform:Rotatex (360deg) Rotatey (360deg); + } the } - </style> $ </Head> the <Body> the <Divclass= "box"> the <Divclass= "Up">On</Div> the <Divclass= "Down">Under</Div> - <Divclass= "Left">Left</Div> in <Divclass= "Right">Right</Div> the <Divclass= "Forward">Ago</Div> the <Divclass= "Back">After</Div> About </Div> the </Body> the </HTML>
Operating effect:
102th Day: CSS3 for cube rotation