react-three-d
Version:
A versatile React library designed to simplify the process of creating and manipulating 3D shapes using CSS.
48 lines • 2.48 kB
JavaScript
"use strict";
Object.defineProperty(exports, "__esModule", { value: true });
var tslib_1 = require("tslib");
var react_1 = tslib_1.__importStar(require("react"));
function Flip(_a) {
var children = _a.children, height = _a.height, isFlipped = _a.isFlipped, onFlipEnd = _a.onFlipEnd, perspective = _a.perspective, style = _a.style, width = _a.width, props = tslib_1.__rest(_a, ["children", "height", "isFlipped", "onFlipEnd", "perspective", "style", "width"]);
var _b = react_1.Children.toArray(children), firstChild = _b[0], lastChild = _b[1];
function handleFlipEnd(event) {
if (onFlipEnd) {
onFlipEnd(event);
}
}
return (react_1.default.createElement("div", tslib_1.__assign({ style: tslib_1.__assign(tslib_1.__assign({}, style), { height: height, perspective: perspective, width: width }) }, props),
react_1.default.createElement("div", { style: {
position: 'relative',
width: '100%',
height: '100%',
cursor: 'pointer',
transition: 'transform 1s',
WebkitTransition: 'transform 1s',
transformOrigin: 'center right',
WebkitTransformOrigin: 'center right',
transformStyle: 'preserve-3d',
WebkitTransformStyle: 'preserve-3d',
transform: isFlipped ? 'translateX(-100%) rotateY(-180deg)' : 'none',
WebkitTransform: isFlipped ? 'translateX(-100%) rotateY(-180deg)' : 'none',
}, onTransitionEnd: handleFlipEnd },
react_1.default.createElement("div", { style: {
position: 'absolute',
width: '100%',
height: '100%',
backfaceVisibility: 'hidden',
WebkitBackfaceVisibility: 'hidden',
MozBackfaceVisibility: 'hidden',
} }, firstChild),
react_1.default.createElement("div", { style: {
position: 'absolute',
width: '100%',
height: '100%',
backfaceVisibility: 'hidden',
WebkitBackfaceVisibility: 'hidden',
MozBackfaceVisibility: 'hidden',
transform: 'rotateY(180deg)',
WebkitTransform: 'rotateY(180deg)',
} }, lastChild))));
}
exports.default = (0, react_1.memo)(Flip);
//# sourceMappingURL=Flip.js.map