These are 3D Profile Flip Cards. Click the i to flip the card. The concept started out as a hover event, but that proved challenging on a mobile device, so I opted to use a bit of js to change out classes on click/touch.
There are a variety of flip options, Y, X and Diagonal
This was inspired by Rich Bradshaw: http://css3.bradshawenterprises.com/flip/
Images were from random Google search... I apologize in advance. Maybe I'll switch it out to placekitten.
| Homebrew build logs for droi on Mac OS X 10.11.6 | |
| Build date: 2016-09-16 13:44:24 |
| /** | |
| * This will be an instance member, Observable#publish. | |
| * @memberof Map.prototype | |
| * @param {Object} [target] - The object that the properties derived from the map's key/value pairs will be created on. | |
| * @returns {Object} | |
| */ | |
| Map.prototype.toObject = function(target = Object.create(null)) { | |
| let props = [...this].map(kvp => { | |
| let [key, value] = kvp; |
| /** | |
| * @param {Function} kvpFn - The function used to create the mapping. Return either the value to be used as key and the entire item will be set as the value, or return a key/value pair in the format [key, value] to specify both explicitely. | |
| * @returns {Map} | |
| */ | |
| Array.prototype.toMap = function(kvpFn){ | |
| return new Map(this.map(item => { | |
| let [key,value=item] = Array.prototype.concat.apply([], [kvpFn(item)]); | |
| return [key,value]; | |
| })); | |
| } |