CSS Transform-style properties for 3D effects

Rendered in 2d plane relative to Transform-style:flat, transform-style:preserve-3d renders all child elements in 3d space.

Instance:

Html:

1 <Divclass= "Transform-style">2     <H3>Put the mouse on the picture to see the effect Oh! (Picture inversion 360 degrees)</H3>3     <Divclass= "Container">4         <Divclass= "inner">5             <Divclass= "Rotate">6                 <imgsrc= "Http://images2015.cnblogs.com/blog/561794/201604/561794-20160412230412973-1641353956.jpg"alt=""width= "142"Height= "$" />7             </Div>8         </Div>9     </Div>Ten  One     <H3>Put the mouse on the picture to see the effect Oh! (Image inversion 360 degrees-using transform-style:preserve-3d; effect)</H3> A     <Divclass= "Container"> -         <Divclass= "inner"> -             <Divclass= "Rotate three-d"> the                 <imgsrc= "Http://images2015.cnblogs.com/blog/561794/201604/561794-20160412230412973-1641353956.jpg"alt=""width= "142"Height= "$" /> -             </Div> -         </Div> -     </Div> +     </Div>

View Code

Css:

1 . Transform-style. Container{2 width:500px;3 Height:300px;4 margin:10px Auto;5 position:relative;6}7 . Transform-style. Inner{8 width:142px;9 Height:200px;Ten position:Absolute; One} A //Set animation - @keyframes Inner{ - 0%{ the Transform:Rotatey (0deg) -} - 100%{ - Transform:Rotatey (360deg) +} -     } + //Call animation A . Transform-style. Inner:hover{ at Animation:Inner 5s linear infinite; -} -  - . Transform-style. Rotate{ - background:URL ("http://images2015.cnblogs.com/blog/561794/201604/561794-20160412230412973-1641353956.jpg") no-repeat Center; - Border:5px Solid Hsla (50,50%,50%,.9); in Transform:Perspective (200px) Rotatey (45deg); -} to . Transform-style. Rotate img{ + Border:1px solid Green; - Transform:Rotatex (15deg) Translatez (10px); the Transform-origin:0 0 40px; *} $ //Change the default value of Transform-stylePanax Notoginseng . Transform-style. three-d{ - Transform-style:preserve-3d; the}

View Code

View Demo Online

CSS Transform-style properties for 3D effects