CSS3--3D flip album, css33d flip

CSS3--3D flip album, css33d flip

The transform attribute and the transition attribute are combined with jQuery code to implement the flip function.

1 <! DOCTYPE html> 2 　　　　　　　　　

font-size: 50px;

28} 29/* set different bgc for easy differentiation */30. item: nth-child (1) {31/* background-image: url ("images/01.jpg"); */32 background-color: # cc1188; 33} 34. item: nth-child (2) {35/* background-image: url ("images/02.jpg"); */36 background-color: # 0094ff; 37} 38. item: nth-child (3) {39/* background-image: url ("images/03.jpg"); */40 background-color: #22ff22; 41} 42. item: nth-child (4) {43/* background-image: url ("images/04.jpg"); */44 background-color: #666666; 45} 46/* define animation */47 @ keyframes autoMove {48 from {} 49 to {50 transform: rotateX (360deg ); 51} 52} 53/* set the left/right flip arrow style */54. left ,. right {55 width: 50px; 56 height: 50px; 57 line-height: 50px; 58 text-align: center; 59 color: white; 60 font-size: 50px; 61 background-color: darkslategray; 62 opacity :. 5; 63 position: absolute; 64 top: 50%; 65 margin-top:-25px; 66 cursor: pointer; 67} 68. left {69 left:-25px; 70} 71. right {72 right:-25px; 73} 74 </style> 75 <script> 76 $ (function () {77 var itemNum = $ (". items>. item "). length; 78 var itemDeg = 360/itemNum; 79 $ (". items. item "). each (function (index, element) {80 items (element).css ({81 transform: "rotateX (" + index * itemDeg + "deg) translateZ (pixel px)" 82 }); 83}); 84 var count = 0; // record the number of clicks, right-click and Add 1, and left-click minus 1 85 $ (". container. arrow. right "). click (function () {86 count ++; 87 $ (". items "2.16.css ({88 transform:" rotateX ("+-90 * count +" deg) "89}); 90 91}); 92 $ (". container. arrow. left "). click (function () {93 count --; 94 $ (". items "2.16.css ({95 transform:" rotateX ("+-90 * count +" deg) "96}); 97}); 98 }); 99 </script> 100