react-three-d
Version:
A versatile React library designed to simplify the process of creating and manipulating 3D shapes using CSS.
46 lines • 2.31 kB
JavaScript
import { __assign, __rest } from "tslib";
import React, { Children, memo } from '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 = __rest(_a, ["children", "height", "isFlipped", "onFlipEnd", "perspective", "style", "width"]);
var _b = Children.toArray(children), firstChild = _b[0], lastChild = _b[1];
function handleFlipEnd(event) {
if (onFlipEnd) {
onFlipEnd(event);
}
}
return (React.createElement("div", __assign({ style: __assign(__assign({}, style), { height: height, perspective: perspective, width: width }) }, props),
React.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.createElement("div", { style: {
position: 'absolute',
width: '100%',
height: '100%',
backfaceVisibility: 'hidden',
WebkitBackfaceVisibility: 'hidden',
MozBackfaceVisibility: 'hidden',
} }, firstChild),
React.createElement("div", { style: {
position: 'absolute',
width: '100%',
height: '100%',
backfaceVisibility: 'hidden',
WebkitBackfaceVisibility: 'hidden',
MozBackfaceVisibility: 'hidden',
transform: 'rotateY(180deg)',
WebkitTransform: 'rotateY(180deg)',
} }, lastChild))));
}
export default memo(Flip);
//# sourceMappingURL=Flip.js.map