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 lime;19 background: rgba(0,255,0,0.1);20 }21 22 .PicVi .canvas {23 transition: all 0.2s ease;24 }25 26 .PicVi .canvas[position="left"] {27 transform: translateX(-100%);28 -webkit-transform: translateX(-100%);29 }30 31 .PicVi .canvas[position="left-far"] {32 transform: translateX(-200%);33 -webkit-transform: translateX(-200%);34 display: none;35 }36 37 .PicVi .canvas[position="center"] {38 39 }40 41 .PicVi .canvas[position="right"] {42 transform: translateX(100%);43 -webkit-transform: translateX(100%);44 45 }46 47 .PicVi .canvas[position="right-far"] {48 transform: translateX(200%);49 -webkit-transform: translateX(200%);50 display: none;51 }52 53 54 .PicVi .canvas[position="hidden"] {55 display: none;56 }57 Enlace
El enlace para compartir es: