-1
我不想旋转盒子，我只想旋转或翻转色带盒上的文本。我想翻转或旋转这个功能区文本，使其可读？
如果您直接旋转盒子，将会扰乱字符串Animation。
(function(){
\t var STATE_CLOSED = 0,
\t \t STATE_DETACHED = 1,
\t \t STATE_OPENED = 2,
\t \t TAG_HEIGHT = 30,
\t \t TAG_WIDTH = 200,
\t \t MAX_STRAIN = 40,
\t \t // Factor of page height that needs to be dragged for the
\t \t // curtain to fall
\t \t DRAG_THRESHOLD = 0.36;
\t \t VENDORS = [ 'Webkit', 'Moz', 'O', 'ms' ];
\t var dom = {
\t \t \t ribbon: null,
\t \t \t ribbonString: null,
\t \t \t ribbonTag: null,
\t \t \t curtain: null,
\t \t \t closeButton: null
\t \t },
\t \t // The current state of the ribbon
\t \t state = STATE_CLOSED,
\t \t // Ribbon text, correlates to states
\t \t closedText = '',
\t \t detachedText = '',
\t \t friction = 1.04;
\t \t gravity = 1.5,
\t \t // Resting position of the ribbon when curtain is closed
\t \t closedX = TAG_WIDTH * 0.55,
\t \t closedY = -TAG_HEIGHT * 0.1,
\t \t // Resting position of the ribbon when curtain is opened
\t \t openedX = TAG_WIDTH * 0.4,
\t \t openedY = TAG_HEIGHT,
\t \t velocity = 0,
\t \t rotation = 45,
\t \t curtainTargetY = 0,
\t \t curtainCurrentY = 0,
\t \t dragging = false,
\t \t dragTime = 0,
\t \t dragY = 0,
\t \t anchorA = new Point(closedX, closedY),
\t \t anchorB = new Point(closedX, closedY),
\t \t mouse = new Point();
\t function initialize() {
\t \t dom.ribbon = document.querySelector('.forkit');
\t \t dom.curtain = document.querySelector('.forkit-curtain');
\t \t dom.closeButton = document.querySelector('.forkit-curtain .close-button');
\t \t if(dom.ribbon) {
\t \t \t // Fetch label texts from DOM
\t \t \t closedText = dom.ribbon.getAttribute('data-text') || '';
\t \t \t detachedText = dom.ribbon.getAttribute('data-text-detached') || closedText;
\t \t \t // Construct the sub-elements required to represent the
\t \t \t // tag and string that it hangs from
\t \t \t dom.ribbon.innerHTML = '<span class="string"></span><span class="tag">' + closedText + '</span>';
\t \t \t dom.ribbonString = dom.ribbon.querySelector('.string');
\t \t \t dom.ribbonTag = dom.ribbon.querySelector('.tag');
\t \t \t // Bind events
\t \t \t dom.ribbon.addEventListener('click', onRibbonClick, false);
\t \t \t document.addEventListener('mousemove', onMouseMove, false);
\t \t \t document.addEventListener('mousedown', onMouseDown, false);
\t \t \t document.addEventListener('mouseup', onMouseUp, false);
\t \t \t document.addEventListener('touchstart', onTouchStart, false);
\t \t \t document.addEventListener('touchmove', onTouchMove, false);
\t \t \t document.addEventListener('touchend', onTouchEnd, false);
\t \t \t window.addEventListener('resize', layout, false);
\t \t \t if(dom.closeButton) {
\t \t \t \t dom.closeButton.addEventListener('click', onCloseClick, false);
\t \t \t }
\t \t \t // Start the animation loop
\t \t \t animate();
\t \t }
\t }
\t function onMouseDown(event) {
\t \t if(dom.curtain && state === STATE_DETACHED) {
\t \t \t event.preventDefault();
\t \t \t dragY = event.clientY;
\t \t \t dragTime = Date.now();
\t \t \t dragging = true;
\t \t }
\t }
\t function onMouseMove(event) {
\t \t mouse.x = event.clientX;
\t \t mouse.y = event.clientY;
\t }
\t function onMouseUp(event) {
\t \t if(state !== STATE_OPENED) {
\t \t \t state = STATE_CLOSED;
\t \t \t dragging = false;
\t \t }
\t }
\t function onTouchStart(event) {
\t \t if(dom.curtain && state === STATE_DETACHED) {
\t \t \t event.preventDefault();
\t \t \t var touch = event.touches[0];
\t \t \t dragY = touch.clientY;
\t \t \t dragTime = Date.now();
\t \t \t dragging = true;
\t \t }
\t }
\t function onTouchMove(event) {
\t \t var touch = event.touches[0];
\t \t mouse.x = touch.pageX;
\t \t mouse.y = touch.pageY;
\t }
\t function onTouchEnd(event) {
\t \t if(state !== STATE_OPENED) {
\t \t \t state = STATE_CLOSED;
\t \t \t dragging = false;
\t \t }
\t }
\t function onRibbonClick(event) {
\t \t if(dom.curtain) {
\t \t \t event.preventDefault();
\t \t \t if(state === STATE_OPENED) {
\t \t \t \t close();
\t \t \t }
\t \t \t else if(Date.now() - dragTime < 300) {
\t \t \t \t open();
\t \t \t }
\t \t }
\t }
\t function onCloseClick(event) {
\t \t event.preventDefault();
\t \t close();
\t }
\t function layout() {
\t \t if(state === STATE_OPENED) {
\t \t \t curtainTargetY = window.innerHeight;
\t \t \t curtainCurrentY = curtainTargetY;
\t \t }
\t }
\t function open() {
\t \t dragging = false;
\t \t state = STATE_OPENED;
\t }
\t function close() {
\t \t dragging = false;
\t \t state = STATE_CLOSED;
\t \t dom.ribbonTag.innerHTML = closedText;
\t }
\t function detach() {
\t \t state = STATE_DETACHED;
\t \t dom.ribbonTag.innerHTML = detachedText;
\t }
\t function animate() {
\t \t update();
\t \t render();
\t \t requestAnimFrame(animate);
\t }
\t function update() {
\t \t // Distance between mouse and top right corner
\t \t var distance = distanceBetween(mouse.x, mouse.y, window.innerWidth, 0);
\t \t // If we're OPENED the curtainTargetY should ease towards page bottom
\t \t if(state === STATE_OPENED) {
\t \t \t curtainTargetY = Math.min(curtainTargetY + (window.innerHeight - curtainTargetY) * 0.2, window.innerHeight);
\t \t }
\t \t else {
\t \t \t // Detach the tag when hovering close enough
\t \t \t if(distance < TAG_WIDTH * 1.5) {
\t \t \t \t detach();
\t \t \t }
\t \t \t // Re-attach the tag if the user moved away
\t \t \t else if(!dragging && state === STATE_DETACHED && distance > TAG_WIDTH * 2) {
\t \t \t \t close();
\t \t \t }
\t \t \t if(dragging) {
\t \t \t \t // Updat the curtain position while dragging
\t \t \t \t curtainTargetY = Math.max(mouse.y - dragY, 0);
\t \t \t \t // If the threshold is crossed, open the curtain
\t \t \t \t if(curtainTargetY > window.innerHeight * DRAG_THRESHOLD) {
\t \t \t \t \t open();
\t \t \t \t }
\t \t \t }
\t \t \t else {
\t \t \t \t curtainTargetY *= 0.8;
\t \t \t }
\t \t }
\t \t // Ease towards the target position of the curtain
\t \t curtainCurrentY += (curtainTargetY - curtainCurrentY) * 0.3;
\t \t // If we're dragging or detached we need to simulate
\t \t // the physical behavior of the ribbon
\t \t if(dragging || state === STATE_DETACHED) {
\t \t \t // Apply forces
\t \t \t velocity /= friction;
\t \t \t velocity += gravity;
\t \t \t var containerOffsetX = dom.ribbon.offsetLeft;
\t \t \t var offsetX = Math.max(((mouse.x - containerOffsetX) - closedX) * 0.2, -MAX_STRAIN);
\t \t \t anchorB.x += ((closedX + offsetX) - anchorB.x) * 0.1;
\t \t \t anchorB.y += velocity;
\t \t \t var strain = distanceBetween(anchorA.x, anchorA.y, anchorB.x, anchorB.y);
\t \t \t if(strain > MAX_STRAIN) {
\t \t \t \t velocity -= Math.abs(strain)/(MAX_STRAIN * 1.25);
\t \t \t }
\t \t \t var dy = Math.max(mouse.y - anchorB.y, 0),
\t \t \t \t dx = mouse.x - (containerOffsetX + anchorB.x);
\t \t \t // Angle the ribbon towards the mouse but limit it avoid extremes
\t \t \t var angle = Math.min(130, Math.max(50, Math.atan2(dy, dx) * 180/Math.PI));
\t \t \t rotation += (angle - rotation) * 0.1;
\t \t }
\t \t // Ease ribbon towards the OPENED state
\t \t else if(state === STATE_OPENED) {
\t \t \t anchorB.x += (openedX - anchorB.x) * 0.2;
\t \t \t anchorB.y += (openedY - anchorB.y) * 0.2;
\t \t \t rotation += (90 - rotation) * 0.02;
\t \t }
\t \t // Ease ribbon towards the CLOSED state
\t \t else {
\t \t \t anchorB.x += (anchorA.x - anchorB.x) * 0.2;
\t \t \t anchorB.y += (anchorA.y - anchorB.y) * 0.2;
\t \t \t rotation += (135 - rotation) * 0.2;
\t \t }
\t }
\t function render() {
\t \t if(dom.curtain) {
\t \t \t dom.curtain.style.top = - 100 + Math.min((curtainCurrentY/window.innerHeight) * 100, 100) + '%';
\t \t }
\t \t dom.ribbon.style[ prefix('transform') ] = transform(0, curtainCurrentY, 0);
\t \t dom.ribbonTag.style[ prefix('transform') ] = transform(anchorB.x, anchorB.y, rotation);
\t \t var dy = anchorB.y - anchorA.y,
\t \t \t dx = anchorB.x - anchorA.x;
\t \t var angle = Math.atan2(dy, dx) * 180/Math.PI;
\t \t dom.ribbonString.style.width = anchorB.y + 'px';
\t \t dom.ribbonString.style[ prefix('transform') ] = transform(anchorA.x, 0, angle);
\t }
\t function prefix(property, el) {
\t \t var propertyUC = property.slice(0, 1).toUpperCase() + property.slice(1);
\t \t for(var i = 0, len = VENDORS.length; i < len; i++) {
\t \t \t var vendor = VENDORS[i];
\t \t \t if(typeof (el || document.body).style[ vendor + propertyUC ] !== 'undefined') {
\t \t \t \t return vendor + propertyUC;
\t \t \t }
\t \t }
\t \t return property;
\t }
\t function transform(x, y, r) {
\t \t return 'translate('+x+'px,'+y+'px) rotate('+r+'deg)';
\t }
\t function distanceBetween(x1, y1, x2, y2) {
\t \t var dx = x1-x2;
\t \t var dy = y1-y2;
\t \t return Math.sqrt(dx*dx + dy*dy);
\t }
\t /**
\t * Defines a 2D position.
\t */
\t function Point(x, y) {
\t \t this.x = x || 0;
\t \t this.y = y || 0;
\t }
\t Point.prototype.distanceTo = function(x, y) {
\t \t var dx = x-this.x;
\t \t var dy = y-this.y;
\t \t return Math.sqrt(dx*dx + dy*dy);
\t };
\t Point.prototype.clone = function() {
\t \t return new Point(this.x, this.y);
\t };
\t Point.prototype.interpolate = function(x, y, amp) {
\t \t this.x += (x - this.x) * amp;
\t \t this.y += (y - this.y) * amp;
\t };
\t window.requestAnimFrame = (function(){
\t \t return window.requestAnimationFrame \t \t ||
\t \t \t \t window.webkitRequestAnimationFrame \t ||
\t \t \t \t window.mozRequestAnimationFrame \t \t ||
\t \t \t \t window.oRequestAnimationFrame \t \t ||
\t \t \t \t window.msRequestAnimationFrame \t \t ||
\t \t \t \t function(callback){
\t \t \t \t \t window.setTimeout(callback, 1000/60);
\t \t \t \t };
\t })();
\t initialize();
})();.forkit-curtain {
\t text-align: center;
\t background: rgba(0, 0, 0, 0.8);
\t padding-top: 0%;
}
\t
.forkit-curtain .close-button {
\t \t position: absolute;
\t \t width: 32px;
\t \t height: 32px;
\t \t right: 20px;
\t \t top: 20px;
\t \t cursor: pointer;
\t \t background: url(data:image/png;base64,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);
\t }
.forkit {
\t position: absolute;
\t left: 0;
\t top: 0;
\t width: 200px;
\t height: 150px;
\t font-family: 'Lato', sans-serif;
\t text-decoration: none;
}
\t .forkit .tag {
\t \t display: block;
\t \t height: 30px;
\t \t width: 200px;
\t \t color: #fff;
\t \t background: #aaa000;
\t \t text-align: center;
\t \t font-size: 13px;
\t \t font-weight: bold;
\t \t line-height: 30px;
\t \t box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.4);
\t \t -webkit-transform-origin: 15px 0px;
\t \t -moz-transform-origin: 15px 0px;
\t \t -ms-transform-origin: 15px 0px;
\t \t -o-transform-origin: 15px 0px;
\t \t transform-origin: 15px 0px;
\t }
\t .forkit .tag:after {
\t \t content: '';
\t \t display: block;
\t \t position: absolute;
\t \t top: 0;
\t \t left: 0;
\t \t width: 196px;
\t \t height: 26px;
\t \t margin: 1px;
\t \t border: 1px solid rgba(255, 255, 255, 0.4);
\t }
\t .forkit .string {
\t \t display: block;
\t \t height: 1px;
\t \t width: 0px;
\t \t position: absolute;
\t \t background: rgba(0, 0, 204, 0.8);
\t \t box-shadow: 0px 0px 10px rgba(0,0,255,0.3);
\t \t -webkit-transform-origin: 0px 0px;
\t \t -moz-transform-origin: 0px 0px;
\t \t -ms-transform-origin: 0px 0px;
\t \t -o-transform-origin: 0px 0px;
\t \t transform-origin: 0px 0px;
\t }
.forkit-curtain {
\t position: absolute;
\t width: 100%;
\t height: 100%;
\t top: -100%;
}<p>This allows us to fill areas with transparent color; the first thee numbers representing the color in RGB values and the fourth representing a transparency value between 0 and 1 (zero being fully transparent and one being fully opaque). We have long had the opacity property, which is similar, but opacity forces all decendant elements to also become transparent and there is no way to fight it (except weird positional hacks) Cross-browser opacity is also a bit sloppy.</p>