1 .PicVi {2 position: absolute;3 top: 0;4 left: 0;5 right: 0;6 bottom: 0;7 border: solid 1px red;8 }9 10 .PicVi .canvas {11 text-align: center;12 position: absolute;13 top: 0;14 left: 0;15 bottom: 0;16 right: 0;17 18 border: solid 1px lightblue;19 background: rgba(128,128,255,0.1);20 }21 22 .PicVi .canvas {23 transition: all 0.5s ease;24 background-size: contain;25 background-position: center center;26 background-repeat: no-repeat;27 }28 29 .PicVi .canvas[position="left"] {30 transform: translateX(-100%);31 -webkit-transform: translateX(-100%);32 }33 34 .PicVi .canvas[position="left-far"] {35 transform: translateX(-200%);36 -webkit-transform: translateX(-200%);37 display: none;38 }39 40 .PicVi .canvas[position="center"] {41 42 }43 44 .PicVi .canvas[position="right"] {45 transform: translateX(100%);46 -webkit-transform: translateX(100%);47 48 }49 50 .PicVi .canvas[position="right-far"] {51 transform: translateX(200%);52 -webkit-transform: translateX(200%);53 display: none;54 }55 56 57 .PicVi .canvas[position="hidden"] {58 display: none;59 }60 Enlace
El enlace para compartir es: