Border on circle creates 1px of black outline
1
I'm creating a header which has a circle in the middle that flips sides. I'm using a plugin called flip.js to get the flip state of the circle in order to place content inside. One example of this content is a white text, black background with a 10px border around it. As you can see it creates a 1px "border" around the circle showing the original color. How can I fix this?
Screenshot
here is my code:
Note: The function is defined at the bottom of the JS, I wanted to include the vendor since it might be the cause of the problem.
/*! flip - v1.1.2 - 2016-10-20
* https://github.com/nnattawat/flip
* Copyright (c) 2016 Nattawat Nonsung; Licensed MIT */
(function( $ ) {
/*
* Private attributes and method
*/
// Function from David Walsh: http://davidwalsh.name/css-animation-callback licensed with http://opensource.org/licenses/MIT
var whichTransitionEvent = function() {
var t, el = document.createElement("fakeelement"),
transitions = {
"transition" : "transitionend",
"OTransition" : "oTransitionEnd",
"MozTransition" : "transitionend",
"WebkitTransition": "webkitTransitionEnd"
};
for (t in transitions) {
if (el.style[t] !== undefined) {
return transitions[t];
}
}
};
/*
* Model declaration
*/
var Flip = function($el, options, callback) {
// Define default setting
this.setting = {
axis: "y",
reverse: false,
trigger: "click",
speed: 500,
forceHeight: false,
forceWidth: false,
autoSize: true,
front: '.front',
back: '.back'
};
this.setting = $.extend(this.setting, options);
if (typeof options.axis === 'string' && (options.axis.toLowerCase() === 'x' || options.axis.toLowerCase() === 'y')) {
this.setting.axis = options.axis.toLowerCase();
}
if (typeof options.reverse === "boolean") {
this.setting.reverse = options.reverse;
}
if (typeof options.trigger === 'string') {
this.setting.trigger = options.trigger.toLowerCase();
}
var speed = parseInt(options.speed);
if (!isNaN(speed)) {
this.setting.speed = speed;
}
if (typeof options.forceHeight === "boolean") {
this.setting.forceHeight = options.forceHeight;
}
if (typeof options.forceWidth === "boolean") {
this.setting.forceWidth = options.forceWidth;
}
if (typeof options.autoSize === "boolean") {
this.setting.autoSize = options.autoSize;
}
if (typeof options.front === 'string' || options.front instanceof $) {
this.setting.front = options.front;
}
if (typeof options.back === 'string' || options.back instanceof $) {
this.setting.back = options.back;
}
// Other attributes
this.element = $el;
this.frontElement = this.getFrontElement();
this.backElement = this.getBackElement();
this.isFlipped = false;
this.init(callback);
};
/*
* Public methods
*/
$.extend(Flip.prototype, {
flipDone: function(callback) {
var self = this;
// Providing a nicely wrapped up callback because transform is essentially async
self.element.one(whichTransitionEvent(), function() {
self.element.trigger('flip:done');
if (typeof callback === 'function') {
callback.call(self.element);
}
});
},
flip: function(callback) {
if (this.isFlipped) {
return;
}
this.isFlipped = true;
var rotateAxis = "rotate" + this.setting.axis;
this.frontElement.css({
transform: rotateAxis + (this.setting.reverse ? "(-180deg)" : "(180deg)"),
"z-index": "0"
});
this.backElement.css({
transform: rotateAxis + "(0deg)",
"z-index": "1"
});
this.flipDone(callback);
},
unflip: function(callback) {
if (!this.isFlipped) {
return;
}
this.isFlipped = false;
var rotateAxis = "rotate" + this.setting.axis;
this.frontElement.css({
transform: rotateAxis + "(0deg)",
"z-index": "1"
});
this.backElement.css({
transform: rotateAxis + (this.setting.reverse ? "(180deg)" : "(-180deg)"),
"z-index": "0"
});
this.flipDone(callback);
},
getFrontElement: function() {
if (this.setting.front instanceof $) {
return this.setting.front;
} else {
return this.element.find(this.setting.front);
}
},
getBackElement: function() {
if (this.setting.back instanceof $) {
return this.setting.back;
} else {
return this.element.find(this.setting.back);
}
},
init: function(callback) {
var self = this;
var faces = self.frontElement.add(self.backElement);
var rotateAxis = "rotate" + self.setting.axis;
var perspective = self.element["outer" + (rotateAxis === "rotatex" ? "Height" : "Width")]() * 2;
var elementCss = {
'perspective': perspective,
'position': 'relative'
};
var backElementCss = {
"transform": rotateAxis + "(" + (self.setting.reverse ? "180deg" : "-180deg") + ")",
"z-index": "0",
"position": "relative"
};
var faceElementCss = {
"backface-visibility": "hidden",
"transform-style": "preserve-3d",
"position": "absolute",
"z-index": "1"
};
if (self.setting.forceHeight) {
faces.outerHeight(self.element.height());
} else if (self.setting.autoSize) {
faceElementCss.height = '100%';
}
if (self.setting.forceWidth) {
faces.outerWidth(self.element.width());
} else if (self.setting.autoSize) {
faceElementCss.width = '100%';
}
// Back face always visible on Chrome #39
if ((window.chrome || (window.Intl && Intl.v8BreakIterator)) && 'CSS' in window) {
//Blink Engine, add preserve-3d to self.element
elementCss["-webkit-transform-style"] = "preserve-3d";
}
faces.css(faceElementCss).find('*').css({
"backface-visibility": "hidden"
});
self.element.css(elementCss);
self.backElement.css(backElementCss);
// #39
// not forcing width/height may cause an initial flip to show up on
// page load when we apply the style to reverse the backface...
// To prevent self we first apply the basic styles and then give the
// browser a moment to apply them. Only afterwards do we add the transition.
setTimeout(function() {
// By now the browser should have applied the styles, so the transition
// will only affect subsequent flips.
var speedInSec = self.setting.speed / 1000 || 0.5;
faces.css({
"transition": "all " + speedInSec + "s ease-out"
});
// This allows flip to be called for setup with only a callback (default settings)
if (typeof callback === 'function') {
callback.call(self.element);
}
// While this used to work with a setTimeout of zero, at some point that became
// unstable and the initial flip returned. The reason for this is unknown but we
// will temporarily use a short delay of 20 to mitigate this issue.
}, 20);
self.attachEvents();
},
clickHandler: function(event) {
if (!event) { event = window.event; }
if (this.element.find($(event.target).closest('button, a, input[type="submit"]')).length) {
return;
}
if (this.isFlipped) {
this.unflip();
} else {
this.flip();
}
},
hoverHandler: function() {
var self = this;
self.element.off('mouseleave.flip');
self.flip();
setTimeout(function() {
self.element.on('mouseleave.flip', $.proxy(self.unflip, self));
if (!self.element.is(":hover")) {
self.unflip();
}
}, (self.setting.speed + 150));
},
attachEvents: function() {
var self = this;
if (self.setting.trigger === "click") {
self.element.on($.fn.tap ? "tap.flip" : "click.flip", $.proxy(self.clickHandler, self));
} else if (self.setting.trigger === "hover") {
self.element.on('mouseenter.flip', $.proxy(self.hoverHandler, self));
self.element.on('mouseleave.flip', $.proxy(self.unflip, self));
}
},
flipChanged: function(callback) {
this.element.trigger('flip:change');
if (typeof callback === 'function') {
callback.call(this.element);
}
},
changeSettings: function(options, callback) {
var self = this;
var changeNeeded = false;
if (options.axis !== undefined && self.setting.axis !== options.axis.toLowerCase()) {
self.setting.axis = options.axis.toLowerCase();
changeNeeded = true;
}
if (options.reverse !== undefined && self.setting.reverse !== options.reverse) {
self.setting.reverse = options.reverse;
changeNeeded = true;
}
if (changeNeeded) {
var faces = self.frontElement.add(self.backElement);
var savedTrans = faces.css(["transition-property", "transition-timing-function", "transition-duration", "transition-delay"]);
faces.css({
transition: "none"
});
// This sets up the first flip in the new direction automatically
var rotateAxis = "rotate" + self.setting.axis;
if (self.isFlipped) {
self.frontElement.css({
transform: rotateAxis + (self.setting.reverse ? "(-180deg)" : "(180deg)"),
"z-index": "0"
});
} else {
self.backElement.css({
transform: rotateAxis + (self.setting.reverse ? "(180deg)" : "(-180deg)"),
"z-index": "0"
});
}
// Providing a nicely wrapped up callback because transform is essentially async
setTimeout(function() {
faces.css(savedTrans);
self.flipChanged(callback);
}, 0);
} else {
// If we didnt have to set the axis we can just call back.
self.flipChanged(callback);
}
}
});
/*
* jQuery collection methods
*/
$.fn.flip = function (options, callback) {
if (typeof options === 'function') {
callback = options;
}
if (typeof options === "string" || typeof options === "boolean") {
this.each(function() {
var flip = $(this).data('flip-model');
if (options === "toggle") {
options = !flip.isFlipped;
}
if (options) {
flip.flip(callback);
} else {
flip.unflip(callback);
}
});
} else {
this.each(function() {
if ($(this).data('flip-model')) { // The element has been initiated, all we have to do is change applicable settings
var flip = $(this).data('flip-model');
if (options && (options.axis !== undefined || options.reverse !== undefined)) {
flip.changeSettings(options, callback);
}
} else { // Init
$(this).data('flip-model', new Flip($(this), (options || {}), callback));
}
});
}
return this;
};
}( jQuery ));
InitializeHeaderSlider();
// Trigger slide every 2 seconds
function InitializeHeaderSlider() {
var oInterval = setInterval(function() {
// Initialize flipper
var oFlip = $('#FlipWrapper').flip();
// Trigger flip toggle
oFlip.flip('toggle');
console.log('flipped');
},2000);
}div#FlipWrapper {
z-index: 999 !important;
top: 38%;
pointer-events: none;
transform: translateX(-3%) skew(16deg);
position: relative;
}
div#FlipWrapper div.Wrapper {
display: block;
width: 175px !important;
height: 175px !important;
border: 10px solid #ffffff;
border-radius: 50%;
}
div#FlipWrapper div.ShopLogo {
width: inherit !important;
height: inherit !important;
background-color: #241f20;
position: absolute !important;
z-index: 99;
top: 32%;
left: 0;
overflow: hidden;
border-radius: 50%;
}
div#FlipWrapper div.ShopLogo div.Inner {
width: 100%;
height: 100%;
padding: 35px;
}
div#FlipWrapper div.ShopLogo div.Inner > img {
width: 100%;
transform: scale(1.1) rotate(-8deg);
}
div#FlipWrapper div.ShopLogo div.Inner p {
color: #ffffff;
transform: rotate(-12deg);
line-height: 43px;
text-align: center;
display: inline;
font-size: 52px;
font-family: "AmaticBold", sans-serif;
margin-left: 10px;
margin-top: 40px;
}
div#FlipWrapper div.ShopLogo div.Inner p span {
display: block;
font-size: 42px;
}<script
src="https://code.jquery.com/jquery-3.3.1.js"
integrity="sha256-2Kok7MbOyxpgUVvAk/HJ2jigOSYS2auK4Pfzbm7uH60="
crossorigin="anonymous"></script>
<div id="FlipWrapper">
<div class="ShopLogo front">
<div class="Wrapper">
<div id="FlipCoinFront" class="Inner valign-wrapper">
<p>shop <span class="In"> - in - </span>shop</p>
</div>
</div>
</div>
<div class="ShopLogo back">
<div class="Wrapper">
<div id="FlipCoinBack" class="Inner valign-wrapper"></div>
</div>
</div>
</div> javascript jquery html css border
asked Nov 16 '18 at 9:15
S. ter KeursS. ter Keurs
1518
add a comment |
1
I'm creating a header which has a circle in the middle that flips sides. I'm using a plugin called flip.js to get the flip state of the circle in order to place content inside. One example of this content is a white text, black background with a 10px border around it. As you can see it creates a 1px "border" around the circle showing the original color. How can I fix this?
Screenshot
here is my code:
Note: The function is defined at the bottom of the JS, I wanted to include the vendor since it might be the cause of the problem.
/*! flip - v1.1.2 - 2016-10-20
* https://github.com/nnattawat/flip
* Copyright (c) 2016 Nattawat Nonsung; Licensed MIT */
(function( $ ) {
/*
* Private attributes and method
*/
// Function from David Walsh: http://davidwalsh.name/css-animation-callback licensed with http://opensource.org/licenses/MIT
var whichTransitionEvent = function() {
var t, el = document.createElement("fakeelement"),
transitions = {
"transition" : "transitionend",
"OTransition" : "oTransitionEnd",
"MozTransition" : "transitionend",
"WebkitTransition": "webkitTransitionEnd"
};
for (t in transitions) {
if (el.style[t] !== undefined) {
return transitions[t];
}
}
};
/*
* Model declaration
*/
var Flip = function($el, options, callback) {
// Define default setting
this.setting = {
axis: "y",
reverse: false,
trigger: "click",
speed: 500,
forceHeight: false,
forceWidth: false,
autoSize: true,
front: '.front',
back: '.back'
};
this.setting = $.extend(this.setting, options);
if (typeof options.axis === 'string' && (options.axis.toLowerCase() === 'x' || options.axis.toLowerCase() === 'y')) {
this.setting.axis = options.axis.toLowerCase();
}
if (typeof options.reverse === "boolean") {
this.setting.reverse = options.reverse;
}
if (typeof options.trigger === 'string') {
this.setting.trigger = options.trigger.toLowerCase();
}
var speed = parseInt(options.speed);
if (!isNaN(speed)) {
this.setting.speed = speed;
}
if (typeof options.forceHeight === "boolean") {
this.setting.forceHeight = options.forceHeight;
}
if (typeof options.forceWidth === "boolean") {
this.setting.forceWidth = options.forceWidth;
}
if (typeof options.autoSize === "boolean") {
this.setting.autoSize = options.autoSize;
}
if (typeof options.front === 'string' || options.front instanceof $) {
this.setting.front = options.front;
}
if (typeof options.back === 'string' || options.back instanceof $) {
this.setting.back = options.back;
}
// Other attributes
this.element = $el;
this.frontElement = this.getFrontElement();
this.backElement = this.getBackElement();
this.isFlipped = false;
this.init(callback);
};
/*
* Public methods
*/
$.extend(Flip.prototype, {
flipDone: function(callback) {
var self = this;
// Providing a nicely wrapped up callback because transform is essentially async
self.element.one(whichTransitionEvent(), function() {
self.element.trigger('flip:done');
if (typeof callback === 'function') {
callback.call(self.element);
}
});
},
flip: function(callback) {
if (this.isFlipped) {
return;
}
this.isFlipped = true;
var rotateAxis = "rotate" + this.setting.axis;
this.frontElement.css({
transform: rotateAxis + (this.setting.reverse ? "(-180deg)" : "(180deg)"),
"z-index": "0"
});
this.backElement.css({
transform: rotateAxis + "(0deg)",
"z-index": "1"
});
this.flipDone(callback);
},
unflip: function(callback) {
if (!this.isFlipped) {
return;
}
this.isFlipped = false;
var rotateAxis = "rotate" + this.setting.axis;
this.frontElement.css({
transform: rotateAxis + "(0deg)",
"z-index": "1"
});
this.backElement.css({
transform: rotateAxis + (this.setting.reverse ? "(180deg)" : "(-180deg)"),
"z-index": "0"
});
this.flipDone(callback);
},
getFrontElement: function() {
if (this.setting.front instanceof $) {
return this.setting.front;
} else {
return this.element.find(this.setting.front);
}
},
getBackElement: function() {
if (this.setting.back instanceof $) {
return this.setting.back;
} else {
return this.element.find(this.setting.back);
}
},
init: function(callback) {
var self = this;
var faces = self.frontElement.add(self.backElement);
var rotateAxis = "rotate" + self.setting.axis;
var perspective = self.element["outer" + (rotateAxis === "rotatex" ? "Height" : "Width")]() * 2;
var elementCss = {
'perspective': perspective,
'position': 'relative'
};
var backElementCss = {
"transform": rotateAxis + "(" + (self.setting.reverse ? "180deg" : "-180deg") + ")",
"z-index": "0",
"position": "relative"
};
var faceElementCss = {
"backface-visibility": "hidden",
"transform-style": "preserve-3d",
"position": "absolute",
"z-index": "1"
};
if (self.setting.forceHeight) {
faces.outerHeight(self.element.height());
} else if (self.setting.autoSize) {
faceElementCss.height = '100%';
}
if (self.setting.forceWidth) {
faces.outerWidth(self.element.width());
} else if (self.setting.autoSize) {
faceElementCss.width = '100%';
}
// Back face always visible on Chrome #39
if ((window.chrome || (window.Intl && Intl.v8BreakIterator)) && 'CSS' in window) {
//Blink Engine, add preserve-3d to self.element
elementCss["-webkit-transform-style"] = "preserve-3d";
}
faces.css(faceElementCss).find('*').css({
"backface-visibility": "hidden"
});
self.element.css(elementCss);
self.backElement.css(backElementCss);
// #39
// not forcing width/height may cause an initial flip to show up on
// page load when we apply the style to reverse the backface...
// To prevent self we first apply the basic styles and then give the
// browser a moment to apply them. Only afterwards do we add the transition.
setTimeout(function() {
// By now the browser should have applied the styles, so the transition
// will only affect subsequent flips.
var speedInSec = self.setting.speed / 1000 || 0.5;
faces.css({
"transition": "all " + speedInSec + "s ease-out"
});
// This allows flip to be called for setup with only a callback (default settings)
if (typeof callback === 'function') {
callback.call(self.element);
}
// While this used to work with a setTimeout of zero, at some point that became
// unstable and the initial flip returned. The reason for this is unknown but we
// will temporarily use a short delay of 20 to mitigate this issue.
}, 20);
self.attachEvents();
},
clickHandler: function(event) {
if (!event) { event = window.event; }
if (this.element.find($(event.target).closest('button, a, input[type="submit"]')).length) {
return;
}
if (this.isFlipped) {
this.unflip();
} else {
this.flip();
}
},
hoverHandler: function() {
var self = this;
self.element.off('mouseleave.flip');
self.flip();
setTimeout(function() {
self.element.on('mouseleave.flip', $.proxy(self.unflip, self));
if (!self.element.is(":hover")) {
self.unflip();
}
}, (self.setting.speed + 150));
},
attachEvents: function() {
var self = this;
if (self.setting.trigger === "click") {
self.element.on($.fn.tap ? "tap.flip" : "click.flip", $.proxy(self.clickHandler, self));
} else if (self.setting.trigger === "hover") {
self.element.on('mouseenter.flip', $.proxy(self.hoverHandler, self));
self.element.on('mouseleave.flip', $.proxy(self.unflip, self));
}
},
flipChanged: function(callback) {
this.element.trigger('flip:change');
if (typeof callback === 'function') {
callback.call(this.element);
}
},
changeSettings: function(options, callback) {
var self = this;
var changeNeeded = false;
if (options.axis !== undefined && self.setting.axis !== options.axis.toLowerCase()) {
self.setting.axis = options.axis.toLowerCase();
changeNeeded = true;
}
if (options.reverse !== undefined && self.setting.reverse !== options.reverse) {
self.setting.reverse = options.reverse;
changeNeeded = true;
}
if (changeNeeded) {
var faces = self.frontElement.add(self.backElement);
var savedTrans = faces.css(["transition-property", "transition-timing-function", "transition-duration", "transition-delay"]);
faces.css({
transition: "none"
});
// This sets up the first flip in the new direction automatically
var rotateAxis = "rotate" + self.setting.axis;
if (self.isFlipped) {
self.frontElement.css({
transform: rotateAxis + (self.setting.reverse ? "(-180deg)" : "(180deg)"),
"z-index": "0"
});
} else {
self.backElement.css({
transform: rotateAxis + (self.setting.reverse ? "(180deg)" : "(-180deg)"),
"z-index": "0"
});
}
// Providing a nicely wrapped up callback because transform is essentially async
setTimeout(function() {
faces.css(savedTrans);
self.flipChanged(callback);
}, 0);
} else {
// If we didnt have to set the axis we can just call back.
self.flipChanged(callback);
}
}
});
/*
* jQuery collection methods
*/
$.fn.flip = function (options, callback) {
if (typeof options === 'function') {
callback = options;
}
if (typeof options === "string" || typeof options === "boolean") {
this.each(function() {
var flip = $(this).data('flip-model');
if (options === "toggle") {
options = !flip.isFlipped;
}
if (options) {
flip.flip(callback);
} else {
flip.unflip(callback);
}
});
} else {
this.each(function() {
if ($(this).data('flip-model')) { // The element has been initiated, all we have to do is change applicable settings
var flip = $(this).data('flip-model');
if (options && (options.axis !== undefined || options.reverse !== undefined)) {
flip.changeSettings(options, callback);
}
} else { // Init
$(this).data('flip-model', new Flip($(this), (options || {}), callback));
}
});
}
return this;
};
}( jQuery ));
InitializeHeaderSlider();
// Trigger slide every 2 seconds
function InitializeHeaderSlider() {
var oInterval = setInterval(function() {
// Initialize flipper
var oFlip = $('#FlipWrapper').flip();
// Trigger flip toggle
oFlip.flip('toggle');
console.log('flipped');
},2000);
}div#FlipWrapper {
z-index: 999 !important;
top: 38%;
pointer-events: none;
transform: translateX(-3%) skew(16deg);
position: relative;
}
div#FlipWrapper div.Wrapper {
display: block;
width: 175px !important;
height: 175px !important;
border: 10px solid #ffffff;
border-radius: 50%;
}
div#FlipWrapper div.ShopLogo {
width: inherit !important;
height: inherit !important;
background-color: #241f20;
position: absolute !important;
z-index: 99;
top: 32%;
left: 0;
overflow: hidden;
border-radius: 50%;
}
div#FlipWrapper div.ShopLogo div.Inner {
width: 100%;
height: 100%;
padding: 35px;
}
div#FlipWrapper div.ShopLogo div.Inner > img {
width: 100%;
transform: scale(1.1) rotate(-8deg);
}
div#FlipWrapper div.ShopLogo div.Inner p {
color: #ffffff;
transform: rotate(-12deg);
line-height: 43px;
text-align: center;
display: inline;
font-size: 52px;
font-family: "AmaticBold", sans-serif;
margin-left: 10px;
margin-top: 40px;
}
div#FlipWrapper div.ShopLogo div.Inner p span {
display: block;
font-size: 42px;
}<script
src="https://code.jquery.com/jquery-3.3.1.js"
integrity="sha256-2Kok7MbOyxpgUVvAk/HJ2jigOSYS2auK4Pfzbm7uH60="
crossorigin="anonymous"></script>
<div id="FlipWrapper">
<div class="ShopLogo front">
<div class="Wrapper">
<div id="FlipCoinFront" class="Inner valign-wrapper">
<p>shop <span class="In"> - in - </span>shop</p>
</div>
</div>
</div>
<div class="ShopLogo back">
<div class="Wrapper">
<div id="FlipCoinBack" class="Inner valign-wrapper"></div>
</div>
</div>
</div> javascript jquery html css border
asked Nov 16 '18 at 9:15
S. ter KeursS. ter Keurs
1518
add a comment |
1
1
1
I'm creating a header which has a circle in the middle that flips sides. I'm using a plugin called flip.js to get the flip state of the circle in order to place content inside. One example of this content is a white text, black background with a 10px border around it. As you can see it creates a 1px "border" around the circle showing the original color. How can I fix this?
Screenshot
here is my code:
Note: The function is defined at the bottom of the JS, I wanted to include the vendor since it might be the cause of the problem.
/*! flip - v1.1.2 - 2016-10-20
* https://github.com/nnattawat/flip
* Copyright (c) 2016 Nattawat Nonsung; Licensed MIT */
(function( $ ) {
/*
* Private attributes and method
*/
// Function from David Walsh: http://davidwalsh.name/css-animation-callback licensed with http://opensource.org/licenses/MIT
var whichTransitionEvent = function() {
var t, el = document.createElement("fakeelement"),
transitions = {
"transition" : "transitionend",
"OTransition" : "oTransitionEnd",
"MozTransition" : "transitionend",
"WebkitTransition": "webkitTransitionEnd"
};
for (t in transitions) {
if (el.style[t] !== undefined) {
return transitions[t];
}
}
};
/*
* Model declaration
*/
var Flip = function($el, options, callback) {
// Define default setting
this.setting = {
axis: "y",
reverse: false,
trigger: "click",
speed: 500,
forceHeight: false,
forceWidth: false,
autoSize: true,
front: '.front',
back: '.back'
};
this.setting = $.extend(this.setting, options);
if (typeof options.axis === 'string' && (options.axis.toLowerCase() === 'x' || options.axis.toLowerCase() === 'y')) {
this.setting.axis = options.axis.toLowerCase();
}
if (typeof options.reverse === "boolean") {
this.setting.reverse = options.reverse;
}
if (typeof options.trigger === 'string') {
this.setting.trigger = options.trigger.toLowerCase();
}
var speed = parseInt(options.speed);
if (!isNaN(speed)) {
this.setting.speed = speed;
}
if (typeof options.forceHeight === "boolean") {
this.setting.forceHeight = options.forceHeight;
}
if (typeof options.forceWidth === "boolean") {
this.setting.forceWidth = options.forceWidth;
}
if (typeof options.autoSize === "boolean") {
this.setting.autoSize = options.autoSize;
}
if (typeof options.front === 'string' || options.front instanceof $) {
this.setting.front = options.front;
}
if (typeof options.back === 'string' || options.back instanceof $) {
this.setting.back = options.back;
}
// Other attributes
this.element = $el;
this.frontElement = this.getFrontElement();
this.backElement = this.getBackElement();
this.isFlipped = false;
this.init(callback);
};
/*
* Public methods
*/
$.extend(Flip.prototype, {
flipDone: function(callback) {
var self = this;
// Providing a nicely wrapped up callback because transform is essentially async
self.element.one(whichTransitionEvent(), function() {
self.element.trigger('flip:done');
if (typeof callback === 'function') {
callback.call(self.element);
}
});
},
flip: function(callback) {
if (this.isFlipped) {
return;
}
this.isFlipped = true;
var rotateAxis = "rotate" + this.setting.axis;
this.frontElement.css({
transform: rotateAxis + (this.setting.reverse ? "(-180deg)" : "(180deg)"),
"z-index": "0"
});
this.backElement.css({
transform: rotateAxis + "(0deg)",
"z-index": "1"
});
this.flipDone(callback);
},
unflip: function(callback) {
if (!this.isFlipped) {
return;
}
this.isFlipped = false;
var rotateAxis = "rotate" + this.setting.axis;
this.frontElement.css({
transform: rotateAxis + "(0deg)",
"z-index": "1"
});
this.backElement.css({
transform: rotateAxis + (this.setting.reverse ? "(180deg)" : "(-180deg)"),
"z-index": "0"
});
this.flipDone(callback);
},
getFrontElement: function() {
if (this.setting.front instanceof $) {
return this.setting.front;
} else {
return this.element.find(this.setting.front);
}
},
getBackElement: function() {
if (this.setting.back instanceof $) {
return this.setting.back;
} else {
return this.element.find(this.setting.back);
}
},
init: function(callback) {
var self = this;
var faces = self.frontElement.add(self.backElement);
var rotateAxis = "rotate" + self.setting.axis;
var perspective = self.element["outer" + (rotateAxis === "rotatex" ? "Height" : "Width")]() * 2;
var elementCss = {
'perspective': perspective,
'position': 'relative'
};
var backElementCss = {
"transform": rotateAxis + "(" + (self.setting.reverse ? "180deg" : "-180deg") + ")",
"z-index": "0",
"position": "relative"
};
var faceElementCss = {
"backface-visibility": "hidden",
"transform-style": "preserve-3d",
"position": "absolute",
"z-index": "1"
};
if (self.setting.forceHeight) {
faces.outerHeight(self.element.height());
} else if (self.setting.autoSize) {
faceElementCss.height = '100%';
}
if (self.setting.forceWidth) {
faces.outerWidth(self.element.width());
} else if (self.setting.autoSize) {
faceElementCss.width = '100%';
}
// Back face always visible on Chrome #39
if ((window.chrome || (window.Intl && Intl.v8BreakIterator)) && 'CSS' in window) {
//Blink Engine, add preserve-3d to self.element
elementCss["-webkit-transform-style"] = "preserve-3d";
}
faces.css(faceElementCss).find('*').css({
"backface-visibility": "hidden"
});
self.element.css(elementCss);
self.backElement.css(backElementCss);
// #39
// not forcing width/height may cause an initial flip to show up on
// page load when we apply the style to reverse the backface...
// To prevent self we first apply the basic styles and then give the
// browser a moment to apply them. Only afterwards do we add the transition.
setTimeout(function() {
// By now the browser should have applied the styles, so the transition
// will only affect subsequent flips.
var speedInSec = self.setting.speed / 1000 || 0.5;
faces.css({
"transition": "all " + speedInSec + "s ease-out"
});
// This allows flip to be called for setup with only a callback (default settings)
if (typeof callback === 'function') {
callback.call(self.element);
}
// While this used to work with a setTimeout of zero, at some point that became
// unstable and the initial flip returned. The reason for this is unknown but we
// will temporarily use a short delay of 20 to mitigate this issue.
}, 20);
self.attachEvents();
},
clickHandler: function(event) {
if (!event) { event = window.event; }
if (this.element.find($(event.target).closest('button, a, input[type="submit"]')).length) {
return;
}
if (this.isFlipped) {
this.unflip();
} else {
this.flip();
}
},
hoverHandler: function() {
var self = this;
self.element.off('mouseleave.flip');
self.flip();
setTimeout(function() {
self.element.on('mouseleave.flip', $.proxy(self.unflip, self));
if (!self.element.is(":hover")) {
self.unflip();
}
}, (self.setting.speed + 150));
},
attachEvents: function() {
var self = this;
if (self.setting.trigger === "click") {
self.element.on($.fn.tap ? "tap.flip" : "click.flip", $.proxy(self.clickHandler, self));
} else if (self.setting.trigger === "hover") {
self.element.on('mouseenter.flip', $.proxy(self.hoverHandler, self));
self.element.on('mouseleave.flip', $.proxy(self.unflip, self));
}
},
flipChanged: function(callback) {
this.element.trigger('flip:change');
if (typeof callback === 'function') {
callback.call(this.element);
}
},
changeSettings: function(options, callback) {
var self = this;
var changeNeeded = false;
if (options.axis !== undefined && self.setting.axis !== options.axis.toLowerCase()) {
self.setting.axis = options.axis.toLowerCase();
changeNeeded = true;
}
if (options.reverse !== undefined && self.setting.reverse !== options.reverse) {
self.setting.reverse = options.reverse;
changeNeeded = true;
}
if (changeNeeded) {
var faces = self.frontElement.add(self.backElement);
var savedTrans = faces.css(["transition-property", "transition-timing-function", "transition-duration", "transition-delay"]);
faces.css({
transition: "none"
});
// This sets up the first flip in the new direction automatically
var rotateAxis = "rotate" + self.setting.axis;
if (self.isFlipped) {
self.frontElement.css({
transform: rotateAxis + (self.setting.reverse ? "(-180deg)" : "(180deg)"),
"z-index": "0"
});
} else {
self.backElement.css({
transform: rotateAxis + (self.setting.reverse ? "(180deg)" : "(-180deg)"),
"z-index": "0"
});
}
// Providing a nicely wrapped up callback because transform is essentially async
setTimeout(function() {
faces.css(savedTrans);
self.flipChanged(callback);
}, 0);
} else {
// If we didnt have to set the axis we can just call back.
self.flipChanged(callback);
}
}
});
/*
* jQuery collection methods
*/
$.fn.flip = function (options, callback) {
if (typeof options === 'function') {
callback = options;
}
if (typeof options === "string" || typeof options === "boolean") {
this.each(function() {
var flip = $(this).data('flip-model');
if (options === "toggle") {
options = !flip.isFlipped;
}
if (options) {
flip.flip(callback);
} else {
flip.unflip(callback);
}
});
} else {
this.each(function() {
if ($(this).data('flip-model')) { // The element has been initiated, all we have to do is change applicable settings
var flip = $(this).data('flip-model');
if (options && (options.axis !== undefined || options.reverse !== undefined)) {
flip.changeSettings(options, callback);
}
} else { // Init
$(this).data('flip-model', new Flip($(this), (options || {}), callback));
}
});
}
return this;
};
}( jQuery ));
InitializeHeaderSlider();
// Trigger slide every 2 seconds
function InitializeHeaderSlider() {
var oInterval = setInterval(function() {
// Initialize flipper
var oFlip = $('#FlipWrapper').flip();
// Trigger flip toggle
oFlip.flip('toggle');
console.log('flipped');
},2000);
}div#FlipWrapper {
z-index: 999 !important;
top: 38%;
pointer-events: none;
transform: translateX(-3%) skew(16deg);
position: relative;
}
div#FlipWrapper div.Wrapper {
display: block;
width: 175px !important;
height: 175px !important;
border: 10px solid #ffffff;
border-radius: 50%;
}
div#FlipWrapper div.ShopLogo {
width: inherit !important;
height: inherit !important;
background-color: #241f20;
position: absolute !important;
z-index: 99;
top: 32%;
left: 0;
overflow: hidden;
border-radius: 50%;
}
div#FlipWrapper div.ShopLogo div.Inner {
width: 100%;
height: 100%;
padding: 35px;
}
div#FlipWrapper div.ShopLogo div.Inner > img {
width: 100%;
transform: scale(1.1) rotate(-8deg);
}
div#FlipWrapper div.ShopLogo div.Inner p {
color: #ffffff;
transform: rotate(-12deg);
line-height: 43px;
text-align: center;
display: inline;
font-size: 52px;
font-family: "AmaticBold", sans-serif;
margin-left: 10px;
margin-top: 40px;
}
div#FlipWrapper div.ShopLogo div.Inner p span {
display: block;
font-size: 42px;
}<script
src="https://code.jquery.com/jquery-3.3.1.js"
integrity="sha256-2Kok7MbOyxpgUVvAk/HJ2jigOSYS2auK4Pfzbm7uH60="
crossorigin="anonymous"></script>
<div id="FlipWrapper">
<div class="ShopLogo front">
<div class="Wrapper">
<div id="FlipCoinFront" class="Inner valign-wrapper">
<p>shop <span class="In"> - in - </span>shop</p>
</div>
</div>
</div>
<div class="ShopLogo back">
<div class="Wrapper">
<div id="FlipCoinBack" class="Inner valign-wrapper"></div>
</div>
</div>
</div> javascript jquery html css border
asked Nov 16 '18 at 9:15
S. ter KeursS. ter Keurs
1518
I'm creating a header which has a circle in the middle that flips sides. I'm using a plugin called flip.js to get the flip state of the circle in order to place content inside. One example of this content is a white text, black background with a 10px border around it. As you can see it creates a 1px "border" around the circle showing the original color. How can I fix this?
Screenshot
here is my code:
Note: The function is defined at the bottom of the JS, I wanted to include the vendor since it might be the cause of the problem.
/*! flip - v1.1.2 - 2016-10-20
* https://github.com/nnattawat/flip
* Copyright (c) 2016 Nattawat Nonsung; Licensed MIT */
(function( $ ) {
/*
* Private attributes and method
*/
// Function from David Walsh: http://davidwalsh.name/css-animation-callback licensed with http://opensource.org/licenses/MIT
var whichTransitionEvent = function() {
var t, el = document.createElement("fakeelement"),
transitions = {
"transition" : "transitionend",
"OTransition" : "oTransitionEnd",
"MozTransition" : "transitionend",
"WebkitTransition": "webkitTransitionEnd"
};
for (t in transitions) {
if (el.style[t] !== undefined) {
return transitions[t];
}
}
};
/*
* Model declaration
*/
var Flip = function($el, options, callback) {
// Define default setting
this.setting = {
axis: "y",
reverse: false,
trigger: "click",
speed: 500,
forceHeight: false,
forceWidth: false,
autoSize: true,
front: '.front',
back: '.back'
};
this.setting = $.extend(this.setting, options);
if (typeof options.axis === 'string' && (options.axis.toLowerCase() === 'x' || options.axis.toLowerCase() === 'y')) {
this.setting.axis = options.axis.toLowerCase();
}
if (typeof options.reverse === "boolean") {
this.setting.reverse = options.reverse;
}
if (typeof options.trigger === 'string') {
this.setting.trigger = options.trigger.toLowerCase();
}
var speed = parseInt(options.speed);
if (!isNaN(speed)) {
this.setting.speed = speed;
}
if (typeof options.forceHeight === "boolean") {
this.setting.forceHeight = options.forceHeight;
}
if (typeof options.forceWidth === "boolean") {
this.setting.forceWidth = options.forceWidth;
}
if (typeof options.autoSize === "boolean") {
this.setting.autoSize = options.autoSize;
}
if (typeof options.front === 'string' || options.front instanceof $) {
this.setting.front = options.front;
}
if (typeof options.back === 'string' || options.back instanceof $) {
this.setting.back = options.back;
}
// Other attributes
this.element = $el;
this.frontElement = this.getFrontElement();
this.backElement = this.getBackElement();
this.isFlipped = false;
this.init(callback);
};
/*
* Public methods
*/
$.extend(Flip.prototype, {
flipDone: function(callback) {
var self = this;
// Providing a nicely wrapped up callback because transform is essentially async
self.element.one(whichTransitionEvent(), function() {
self.element.trigger('flip:done');
if (typeof callback === 'function') {
callback.call(self.element);
}
});
},
flip: function(callback) {
if (this.isFlipped) {
return;
}
this.isFlipped = true;
var rotateAxis = "rotate" + this.setting.axis;
this.frontElement.css({
transform: rotateAxis + (this.setting.reverse ? "(-180deg)" : "(180deg)"),
"z-index": "0"
});
this.backElement.css({
transform: rotateAxis + "(0deg)",
"z-index": "1"
});
this.flipDone(callback);
},
unflip: function(callback) {
if (!this.isFlipped) {
return;
}
this.isFlipped = false;
var rotateAxis = "rotate" + this.setting.axis;
this.frontElement.css({
transform: rotateAxis + "(0deg)",
"z-index": "1"
});
this.backElement.css({
transform: rotateAxis + (this.setting.reverse ? "(180deg)" : "(-180deg)"),
"z-index": "0"
});
this.flipDone(callback);
},
getFrontElement: function() {
if (this.setting.front instanceof $) {
return this.setting.front;
} else {
return this.element.find(this.setting.front);
}
},
getBackElement: function() {
if (this.setting.back instanceof $) {
return this.setting.back;
} else {
return this.element.find(this.setting.back);
}
},
init: function(callback) {
var self = this;
var faces = self.frontElement.add(self.backElement);
var rotateAxis = "rotate" + self.setting.axis;
var perspective = self.element["outer" + (rotateAxis === "rotatex" ? "Height" : "Width")]() * 2;
var elementCss = {
'perspective': perspective,
'position': 'relative'
};
var backElementCss = {
"transform": rotateAxis + "(" + (self.setting.reverse ? "180deg" : "-180deg") + ")",
"z-index": "0",
"position": "relative"
};
var faceElementCss = {
"backface-visibility": "hidden",
"transform-style": "preserve-3d",
"position": "absolute",
"z-index": "1"
};
if (self.setting.forceHeight) {
faces.outerHeight(self.element.height());
} else if (self.setting.autoSize) {
faceElementCss.height = '100%';
}
if (self.setting.forceWidth) {
faces.outerWidth(self.element.width());
} else if (self.setting.autoSize) {
faceElementCss.width = '100%';
}
// Back face always visible on Chrome #39
if ((window.chrome || (window.Intl && Intl.v8BreakIterator)) && 'CSS' in window) {
//Blink Engine, add preserve-3d to self.element
elementCss["-webkit-transform-style"] = "preserve-3d";
}
faces.css(faceElementCss).find('*').css({
"backface-visibility": "hidden"
});
self.element.css(elementCss);
self.backElement.css(backElementCss);
// #39
// not forcing width/height may cause an initial flip to show up on
// page load when we apply the style to reverse the backface...
// To prevent self we first apply the basic styles and then give the
// browser a moment to apply them. Only afterwards do we add the transition.
setTimeout(function() {
// By now the browser should have applied the styles, so the transition
// will only affect subsequent flips.
var speedInSec = self.setting.speed / 1000 || 0.5;
faces.css({
"transition": "all " + speedInSec + "s ease-out"
});
// This allows flip to be called for setup with only a callback (default settings)
if (typeof callback === 'function') {
callback.call(self.element);
}
// While this used to work with a setTimeout of zero, at some point that became
// unstable and the initial flip returned. The reason for this is unknown but we
// will temporarily use a short delay of 20 to mitigate this issue.
}, 20);
self.attachEvents();
},
clickHandler: function(event) {
if (!event) { event = window.event; }
if (this.element.find($(event.target).closest('button, a, input[type="submit"]')).length) {
return;
}
if (this.isFlipped) {
this.unflip();
} else {
this.flip();
}
},
hoverHandler: function() {
var self = this;
self.element.off('mouseleave.flip');
self.flip();
setTimeout(function() {
self.element.on('mouseleave.flip', $.proxy(self.unflip, self));
if (!self.element.is(":hover")) {
self.unflip();
}
}, (self.setting.speed + 150));
},
attachEvents: function() {
var self = this;
if (self.setting.trigger === "click") {
self.element.on($.fn.tap ? "tap.flip" : "click.flip", $.proxy(self.clickHandler, self));
} else if (self.setting.trigger === "hover") {
self.element.on('mouseenter.flip', $.proxy(self.hoverHandler, self));
self.element.on('mouseleave.flip', $.proxy(self.unflip, self));
}
},
flipChanged: function(callback) {
this.element.trigger('flip:change');
if (typeof callback === 'function') {
callback.call(this.element);
}
},
changeSettings: function(options, callback) {
var self = this;
var changeNeeded = false;
if (options.axis !== undefined && self.setting.axis !== options.axis.toLowerCase()) {
self.setting.axis = options.axis.toLowerCase();
changeNeeded = true;
}
if (options.reverse !== undefined && self.setting.reverse !== options.reverse) {
self.setting.reverse = options.reverse;
changeNeeded = true;
}
if (changeNeeded) {
var faces = self.frontElement.add(self.backElement);
var savedTrans = faces.css(["transition-property", "transition-timing-function", "transition-duration", "transition-delay"]);
faces.css({
transition: "none"
});
// This sets up the first flip in the new direction automatically
var rotateAxis = "rotate" + self.setting.axis;
if (self.isFlipped) {
self.frontElement.css({
transform: rotateAxis + (self.setting.reverse ? "(-180deg)" : "(180deg)"),
"z-index": "0"
});
} else {
self.backElement.css({
transform: rotateAxis + (self.setting.reverse ? "(180deg)" : "(-180deg)"),
"z-index": "0"
});
}
// Providing a nicely wrapped up callback because transform is essentially async
setTimeout(function() {
faces.css(savedTrans);
self.flipChanged(callback);
}, 0);
} else {
// If we didnt have to set the axis we can just call back.
self.flipChanged(callback);
}
}
});
/*
* jQuery collection methods
*/
$.fn.flip = function (options, callback) {
if (typeof options === 'function') {
callback = options;
}
if (typeof options === "string" || typeof options === "boolean") {
this.each(function() {
var flip = $(this).data('flip-model');
if (options === "toggle") {
options = !flip.isFlipped;
}
if (options) {
flip.flip(callback);
} else {
flip.unflip(callback);
}
});
} else {
this.each(function() {
if ($(this).data('flip-model')) { // The element has been initiated, all we have to do is change applicable settings
var flip = $(this).data('flip-model');
if (options && (options.axis !== undefined || options.reverse !== undefined)) {
flip.changeSettings(options, callback);
}
} else { // Init
$(this).data('flip-model', new Flip($(this), (options || {}), callback));
}
});
}
return this;
};
}( jQuery ));
InitializeHeaderSlider();
// Trigger slide every 2 seconds
function InitializeHeaderSlider() {
var oInterval = setInterval(function() {
// Initialize flipper
var oFlip = $('#FlipWrapper').flip();
// Trigger flip toggle
oFlip.flip('toggle');
console.log('flipped');
},2000);
}div#FlipWrapper {
z-index: 999 !important;
top: 38%;
pointer-events: none;
transform: translateX(-3%) skew(16deg);
position: relative;
}
div#FlipWrapper div.Wrapper {
display: block;
width: 175px !important;
height: 175px !important;
border: 10px solid #ffffff;
border-radius: 50%;
}
div#FlipWrapper div.ShopLogo {
width: inherit !important;
height: inherit !important;
background-color: #241f20;
position: absolute !important;
z-index: 99;
top: 32%;
left: 0;
overflow: hidden;
border-radius: 50%;
}
div#FlipWrapper div.ShopLogo div.Inner {
width: 100%;
height: 100%;
padding: 35px;
}
div#FlipWrapper div.ShopLogo div.Inner > img {
width: 100%;
transform: scale(1.1) rotate(-8deg);
}
div#FlipWrapper div.ShopLogo div.Inner p {
color: #ffffff;
transform: rotate(-12deg);
line-height: 43px;
text-align: center;
display: inline;
font-size: 52px;
font-family: "AmaticBold", sans-serif;
margin-left: 10px;
margin-top: 40px;
}
div#FlipWrapper div.ShopLogo div.Inner p span {
display: block;
font-size: 42px;
}<script
src="https://code.jquery.com/jquery-3.3.1.js"
integrity="sha256-2Kok7MbOyxpgUVvAk/HJ2jigOSYS2auK4Pfzbm7uH60="
crossorigin="anonymous"></script>
<div id="FlipWrapper">
<div class="ShopLogo front">
<div class="Wrapper">
<div id="FlipCoinFront" class="Inner valign-wrapper">
<p>shop <span class="In"> - in - </span>shop</p>
</div>
</div>
</div>
<div class="ShopLogo back">
<div class="Wrapper">
<div id="FlipCoinBack" class="Inner valign-wrapper"></div>
</div>
</div>
</div> /*! flip - v1.1.2 - 2016-10-20
* https://github.com/nnattawat/flip
* Copyright (c) 2016 Nattawat Nonsung; Licensed MIT */
(function( $ ) {
/*
* Private attributes and method
*/
// Function from David Walsh: http://davidwalsh.name/css-animation-callback licensed with http://opensource.org/licenses/MIT
var whichTransitionEvent = function() {
var t, el = document.createElement("fakeelement"),
transitions = {
"transition" : "transitionend",
"OTransition" : "oTransitionEnd",
"MozTransition" : "transitionend",
"WebkitTransition": "webkitTransitionEnd"
};
for (t in transitions) {
if (el.style[t] !== undefined) {
return transitions[t];
}
}
};
/*
* Model declaration
*/
var Flip = function($el, options, callback) {
// Define default setting
this.setting = {
axis: "y",
reverse: false,
trigger: "click",
speed: 500,
forceHeight: false,
forceWidth: false,
autoSize: true,
front: '.front',
back: '.back'
};
this.setting = $.extend(this.setting, options);
if (typeof options.axis === 'string' && (options.axis.toLowerCase() === 'x' || options.axis.toLowerCase() === 'y')) {
this.setting.axis = options.axis.toLowerCase();
}
if (typeof options.reverse === "boolean") {
this.setting.reverse = options.reverse;
}
if (typeof options.trigger === 'string') {
this.setting.trigger = options.trigger.toLowerCase();
}
var speed = parseInt(options.speed);
if (!isNaN(speed)) {
this.setting.speed = speed;
}
if (typeof options.forceHeight === "boolean") {
this.setting.forceHeight = options.forceHeight;
}
if (typeof options.forceWidth === "boolean") {
this.setting.forceWidth = options.forceWidth;
}
if (typeof options.autoSize === "boolean") {
this.setting.autoSize = options.autoSize;
}
if (typeof options.front === 'string' || options.front instanceof $) {
this.setting.front = options.front;
}
if (typeof options.back === 'string' || options.back instanceof $) {
this.setting.back = options.back;
}
// Other attributes
this.element = $el;
this.frontElement = this.getFrontElement();
this.backElement = this.getBackElement();
this.isFlipped = false;
this.init(callback);
};
/*
* Public methods
*/
$.extend(Flip.prototype, {
flipDone: function(callback) {
var self = this;
// Providing a nicely wrapped up callback because transform is essentially async
self.element.one(whichTransitionEvent(), function() {
self.element.trigger('flip:done');
if (typeof callback === 'function') {
callback.call(self.element);
}
});
},
flip: function(callback) {
if (this.isFlipped) {
return;
}
this.isFlipped = true;
var rotateAxis = "rotate" + this.setting.axis;
this.frontElement.css({
transform: rotateAxis + (this.setting.reverse ? "(-180deg)" : "(180deg)"),
"z-index": "0"
});
this.backElement.css({
transform: rotateAxis + "(0deg)",
"z-index": "1"
});
this.flipDone(callback);
},
unflip: function(callback) {
if (!this.isFlipped) {
return;
}
this.isFlipped = false;
var rotateAxis = "rotate" + this.setting.axis;
this.frontElement.css({
transform: rotateAxis + "(0deg)",
"z-index": "1"
});
this.backElement.css({
transform: rotateAxis + (this.setting.reverse ? "(180deg)" : "(-180deg)"),
"z-index": "0"
});
this.flipDone(callback);
},
getFrontElement: function() {
if (this.setting.front instanceof $) {
return this.setting.front;
} else {
return this.element.find(this.setting.front);
}
},
getBackElement: function() {
if (this.setting.back instanceof $) {
return this.setting.back;
} else {
return this.element.find(this.setting.back);
}
},
init: function(callback) {
var self = this;
var faces = self.frontElement.add(self.backElement);
var rotateAxis = "rotate" + self.setting.axis;
var perspective = self.element["outer" + (rotateAxis === "rotatex" ? "Height" : "Width")]() * 2;
var elementCss = {
'perspective': perspective,
'position': 'relative'
};
var backElementCss = {
"transform": rotateAxis + "(" + (self.setting.reverse ? "180deg" : "-180deg") + ")",
"z-index": "0",
"position": "relative"
};
var faceElementCss = {
"backface-visibility": "hidden",
"transform-style": "preserve-3d",
"position": "absolute",
"z-index": "1"
};
if (self.setting.forceHeight) {
faces.outerHeight(self.element.height());
} else if (self.setting.autoSize) {
faceElementCss.height = '100%';
}
if (self.setting.forceWidth) {
faces.outerWidth(self.element.width());
} else if (self.setting.autoSize) {
faceElementCss.width = '100%';
}
// Back face always visible on Chrome #39
if ((window.chrome || (window.Intl && Intl.v8BreakIterator)) && 'CSS' in window) {
//Blink Engine, add preserve-3d to self.element
elementCss["-webkit-transform-style"] = "preserve-3d";
}
faces.css(faceElementCss).find('*').css({
"backface-visibility": "hidden"
});
self.element.css(elementCss);
self.backElement.css(backElementCss);
// #39
// not forcing width/height may cause an initial flip to show up on
// page load when we apply the style to reverse the backface...
// To prevent self we first apply the basic styles and then give the
// browser a moment to apply them. Only afterwards do we add the transition.
setTimeout(function() {
// By now the browser should have applied the styles, so the transition
// will only affect subsequent flips.
var speedInSec = self.setting.speed / 1000 || 0.5;
faces.css({
"transition": "all " + speedInSec + "s ease-out"
});
// This allows flip to be called for setup with only a callback (default settings)
if (typeof callback === 'function') {
callback.call(self.element);
}
// While this used to work with a setTimeout of zero, at some point that became
// unstable and the initial flip returned. The reason for this is unknown but we
// will temporarily use a short delay of 20 to mitigate this issue.
}, 20);
self.attachEvents();
},
clickHandler: function(event) {
if (!event) { event = window.event; }
if (this.element.find($(event.target).closest('button, a, input[type="submit"]')).length) {
return;
}
if (this.isFlipped) {
this.unflip();
} else {
this.flip();
}
},
hoverHandler: function() {
var self = this;
self.element.off('mouseleave.flip');
self.flip();
setTimeout(function() {
self.element.on('mouseleave.flip', $.proxy(self.unflip, self));
if (!self.element.is(":hover")) {
self.unflip();
}
}, (self.setting.speed + 150));
},
attachEvents: function() {
var self = this;
if (self.setting.trigger === "click") {
self.element.on($.fn.tap ? "tap.flip" : "click.flip", $.proxy(self.clickHandler, self));
} else if (self.setting.trigger === "hover") {
self.element.on('mouseenter.flip', $.proxy(self.hoverHandler, self));
self.element.on('mouseleave.flip', $.proxy(self.unflip, self));
}
},
flipChanged: function(callback) {
this.element.trigger('flip:change');
if (typeof callback === 'function') {
callback.call(this.element);
}
},
changeSettings: function(options, callback) {
var self = this;
var changeNeeded = false;
if (options.axis !== undefined && self.setting.axis !== options.axis.toLowerCase()) {
self.setting.axis = options.axis.toLowerCase();
changeNeeded = true;
}
if (options.reverse !== undefined && self.setting.reverse !== options.reverse) {
self.setting.reverse = options.reverse;
changeNeeded = true;
}
if (changeNeeded) {
var faces = self.frontElement.add(self.backElement);
var savedTrans = faces.css(["transition-property", "transition-timing-function", "transition-duration", "transition-delay"]);
faces.css({
transition: "none"
});
// This sets up the first flip in the new direction automatically
var rotateAxis = "rotate" + self.setting.axis;
if (self.isFlipped) {
self.frontElement.css({
transform: rotateAxis + (self.setting.reverse ? "(-180deg)" : "(180deg)"),
"z-index": "0"
});
} else {
self.backElement.css({
transform: rotateAxis + (self.setting.reverse ? "(180deg)" : "(-180deg)"),
"z-index": "0"
});
}
// Providing a nicely wrapped up callback because transform is essentially async
setTimeout(function() {
faces.css(savedTrans);
self.flipChanged(callback);
}, 0);
} else {
// If we didnt have to set the axis we can just call back.
self.flipChanged(callback);
}
}
});
/*
* jQuery collection methods
*/
$.fn.flip = function (options, callback) {
if (typeof options === 'function') {
callback = options;
}
if (typeof options === "string" || typeof options === "boolean") {
this.each(function() {
var flip = $(this).data('flip-model');
if (options === "toggle") {
options = !flip.isFlipped;
}
if (options) {
flip.flip(callback);
} else {
flip.unflip(callback);
}
});
} else {
this.each(function() {
if ($(this).data('flip-model')) { // The element has been initiated, all we have to do is change applicable settings
var flip = $(this).data('flip-model');
if (options && (options.axis !== undefined || options.reverse !== undefined)) {
flip.changeSettings(options, callback);
}
} else { // Init
$(this).data('flip-model', new Flip($(this), (options || {}), callback));
}
});
}
return this;
};
}( jQuery ));
InitializeHeaderSlider();
// Trigger slide every 2 seconds
function InitializeHeaderSlider() {
var oInterval = setInterval(function() {
// Initialize flipper
var oFlip = $('#FlipWrapper').flip();
// Trigger flip toggle
oFlip.flip('toggle');
console.log('flipped');
},2000);
}div#FlipWrapper {
z-index: 999 !important;
top: 38%;
pointer-events: none;
transform: translateX(-3%) skew(16deg);
position: relative;
}
div#FlipWrapper div.Wrapper {
display: block;
width: 175px !important;
height: 175px !important;
border: 10px solid #ffffff;
border-radius: 50%;
}
div#FlipWrapper div.ShopLogo {
width: inherit !important;
height: inherit !important;
background-color: #241f20;
position: absolute !important;
z-index: 99;
top: 32%;
left: 0;
overflow: hidden;
border-radius: 50%;
}
div#FlipWrapper div.ShopLogo div.Inner {
width: 100%;
height: 100%;
padding: 35px;
}
div#FlipWrapper div.ShopLogo div.Inner > img {
width: 100%;
transform: scale(1.1) rotate(-8deg);
}
div#FlipWrapper div.ShopLogo div.Inner p {
color: #ffffff;
transform: rotate(-12deg);
line-height: 43px;
text-align: center;
display: inline;
font-size: 52px;
font-family: "AmaticBold", sans-serif;
margin-left: 10px;
margin-top: 40px;
}
div#FlipWrapper div.ShopLogo div.Inner p span {
display: block;
font-size: 42px;
}<script
src="https://code.jquery.com/jquery-3.3.1.js"
integrity="sha256-2Kok7MbOyxpgUVvAk/HJ2jigOSYS2auK4Pfzbm7uH60="
crossorigin="anonymous"></script>
<div id="FlipWrapper">
<div class="ShopLogo front">
<div class="Wrapper">
<div id="FlipCoinFront" class="Inner valign-wrapper">
<p>shop <span class="In"> - in - </span>shop</p>
</div>
</div>
</div>
<div class="ShopLogo back">
<div class="Wrapper">
<div id="FlipCoinBack" class="Inner valign-wrapper"></div>
</div>
</div>
</div> /*! flip - v1.1.2 - 2016-10-20
* https://github.com/nnattawat/flip
* Copyright (c) 2016 Nattawat Nonsung; Licensed MIT */
(function( $ ) {
/*
* Private attributes and method
*/
// Function from David Walsh: http://davidwalsh.name/css-animation-callback licensed with http://opensource.org/licenses/MIT
var whichTransitionEvent = function() {
var t, el = document.createElement("fakeelement"),
transitions = {
"transition" : "transitionend",
"OTransition" : "oTransitionEnd",
"MozTransition" : "transitionend",
"WebkitTransition": "webkitTransitionEnd"
};
for (t in transitions) {
if (el.style[t] !== undefined) {
return transitions[t];
}
}
};
/*
* Model declaration
*/
var Flip = function($el, options, callback) {
// Define default setting
this.setting = {
axis: "y",
reverse: false,
trigger: "click",
speed: 500,
forceHeight: false,
forceWidth: false,
autoSize: true,
front: '.front',
back: '.back'
};
this.setting = $.extend(this.setting, options);
if (typeof options.axis === 'string' && (options.axis.toLowerCase() === 'x' || options.axis.toLowerCase() === 'y')) {
this.setting.axis = options.axis.toLowerCase();
}
if (typeof options.reverse === "boolean") {
this.setting.reverse = options.reverse;
}
if (typeof options.trigger === 'string') {
this.setting.trigger = options.trigger.toLowerCase();
}
var speed = parseInt(options.speed);
if (!isNaN(speed)) {
this.setting.speed = speed;
}
if (typeof options.forceHeight === "boolean") {
this.setting.forceHeight = options.forceHeight;
}
if (typeof options.forceWidth === "boolean") {
this.setting.forceWidth = options.forceWidth;
}
if (typeof options.autoSize === "boolean") {
this.setting.autoSize = options.autoSize;
}
if (typeof options.front === 'string' || options.front instanceof $) {
this.setting.front = options.front;
}
if (typeof options.back === 'string' || options.back instanceof $) {
this.setting.back = options.back;
}
// Other attributes
this.element = $el;
this.frontElement = this.getFrontElement();
this.backElement = this.getBackElement();
this.isFlipped = false;
this.init(callback);
};
/*
* Public methods
*/
$.extend(Flip.prototype, {
flipDone: function(callback) {
var self = this;
// Providing a nicely wrapped up callback because transform is essentially async
self.element.one(whichTransitionEvent(), function() {
self.element.trigger('flip:done');
if (typeof callback === 'function') {
callback.call(self.element);
}
});
},
flip: function(callback) {
if (this.isFlipped) {
return;
}
this.isFlipped = true;
var rotateAxis = "rotate" + this.setting.axis;
this.frontElement.css({
transform: rotateAxis + (this.setting.reverse ? "(-180deg)" : "(180deg)"),
"z-index": "0"
});
this.backElement.css({
transform: rotateAxis + "(0deg)",
"z-index": "1"
});
this.flipDone(callback);
},
unflip: function(callback) {
if (!this.isFlipped) {
return;
}
this.isFlipped = false;
var rotateAxis = "rotate" + this.setting.axis;
this.frontElement.css({
transform: rotateAxis + "(0deg)",
"z-index": "1"
});
this.backElement.css({
transform: rotateAxis + (this.setting.reverse ? "(180deg)" : "(-180deg)"),
"z-index": "0"
});
this.flipDone(callback);
},
getFrontElement: function() {
if (this.setting.front instanceof $) {
return this.setting.front;
} else {
return this.element.find(this.setting.front);
}
},
getBackElement: function() {
if (this.setting.back instanceof $) {
return this.setting.back;
} else {
return this.element.find(this.setting.back);
}
},
init: function(callback) {
var self = this;
var faces = self.frontElement.add(self.backElement);
var rotateAxis = "rotate" + self.setting.axis;
var perspective = self.element["outer" + (rotateAxis === "rotatex" ? "Height" : "Width")]() * 2;
var elementCss = {
'perspective': perspective,
'position': 'relative'
};
var backElementCss = {
"transform": rotateAxis + "(" + (self.setting.reverse ? "180deg" : "-180deg") + ")",
"z-index": "0",
"position": "relative"
};
var faceElementCss = {
"backface-visibility": "hidden",
"transform-style": "preserve-3d",
"position": "absolute",
"z-index": "1"
};
if (self.setting.forceHeight) {
faces.outerHeight(self.element.height());
} else if (self.setting.autoSize) {
faceElementCss.height = '100%';
}
if (self.setting.forceWidth) {
faces.outerWidth(self.element.width());
} else if (self.setting.autoSize) {
faceElementCss.width = '100%';
}
// Back face always visible on Chrome #39
if ((window.chrome || (window.Intl && Intl.v8BreakIterator)) && 'CSS' in window) {
//Blink Engine, add preserve-3d to self.element
elementCss["-webkit-transform-style"] = "preserve-3d";
}
faces.css(faceElementCss).find('*').css({
"backface-visibility": "hidden"
});
self.element.css(elementCss);
self.backElement.css(backElementCss);
// #39
// not forcing width/height may cause an initial flip to show up on
// page load when we apply the style to reverse the backface...
// To prevent self we first apply the basic styles and then give the
// browser a moment to apply them. Only afterwards do we add the transition.
setTimeout(function() {
// By now the browser should have applied the styles, so the transition
// will only affect subsequent flips.
var speedInSec = self.setting.speed / 1000 || 0.5;
faces.css({
"transition": "all " + speedInSec + "s ease-out"
});
// This allows flip to be called for setup with only a callback (default settings)
if (typeof callback === 'function') {
callback.call(self.element);
}
// While this used to work with a setTimeout of zero, at some point that became
// unstable and the initial flip returned. The reason for this is unknown but we
// will temporarily use a short delay of 20 to mitigate this issue.
}, 20);
self.attachEvents();
},
clickHandler: function(event) {
if (!event) { event = window.event; }
if (this.element.find($(event.target).closest('button, a, input[type="submit"]')).length) {
return;
}
if (this.isFlipped) {
this.unflip();
} else {
this.flip();
}
},
hoverHandler: function() {
var self = this;
self.element.off('mouseleave.flip');
self.flip();
setTimeout(function() {
self.element.on('mouseleave.flip', $.proxy(self.unflip, self));
if (!self.element.is(":hover")) {
self.unflip();
}
}, (self.setting.speed + 150));
},
attachEvents: function() {
var self = this;
if (self.setting.trigger === "click") {
self.element.on($.fn.tap ? "tap.flip" : "click.flip", $.proxy(self.clickHandler, self));
} else if (self.setting.trigger === "hover") {
self.element.on('mouseenter.flip', $.proxy(self.hoverHandler, self));
self.element.on('mouseleave.flip', $.proxy(self.unflip, self));
}
},
flipChanged: function(callback) {
this.element.trigger('flip:change');
if (typeof callback === 'function') {
callback.call(this.element);
}
},
changeSettings: function(options, callback) {
var self = this;
var changeNeeded = false;
if (options.axis !== undefined && self.setting.axis !== options.axis.toLowerCase()) {
self.setting.axis = options.axis.toLowerCase();
changeNeeded = true;
}
if (options.reverse !== undefined && self.setting.reverse !== options.reverse) {
self.setting.reverse = options.reverse;
changeNeeded = true;
}
if (changeNeeded) {
var faces = self.frontElement.add(self.backElement);
var savedTrans = faces.css(["transition-property", "transition-timing-function", "transition-duration", "transition-delay"]);
faces.css({
transition: "none"
});
// This sets up the first flip in the new direction automatically
var rotateAxis = "rotate" + self.setting.axis;
if (self.isFlipped) {
self.frontElement.css({
transform: rotateAxis + (self.setting.reverse ? "(-180deg)" : "(180deg)"),
"z-index": "0"
});
} else {
self.backElement.css({
transform: rotateAxis + (self.setting.reverse ? "(180deg)" : "(-180deg)"),
"z-index": "0"
});
}
// Providing a nicely wrapped up callback because transform is essentially async
setTimeout(function() {
faces.css(savedTrans);
self.flipChanged(callback);
}, 0);
} else {
// If we didnt have to set the axis we can just call back.
self.flipChanged(callback);
}
}
});
/*
* jQuery collection methods
*/
$.fn.flip = function (options, callback) {
if (typeof options === 'function') {
callback = options;
}
if (typeof options === "string" || typeof options === "boolean") {
this.each(function() {
var flip = $(this).data('flip-model');
if (options === "toggle") {
options = !flip.isFlipped;
}
if (options) {
flip.flip(callback);
} else {
flip.unflip(callback);
}
});
} else {
this.each(function() {
if ($(this).data('flip-model')) { // The element has been initiated, all we have to do is change applicable settings
var flip = $(this).data('flip-model');
if (options && (options.axis !== undefined || options.reverse !== undefined)) {
flip.changeSettings(options, callback);
}
} else { // Init
$(this).data('flip-model', new Flip($(this), (options || {}), callback));
}
});
}
return this;
};
}( jQuery ));
InitializeHeaderSlider();
// Trigger slide every 2 seconds
function InitializeHeaderSlider() {
var oInterval = setInterval(function() {
// Initialize flipper
var oFlip = $('#FlipWrapper').flip();
// Trigger flip toggle
oFlip.flip('toggle');
console.log('flipped');
},2000);
}div#FlipWrapper {
z-index: 999 !important;
top: 38%;
pointer-events: none;
transform: translateX(-3%) skew(16deg);
position: relative;
}
div#FlipWrapper div.Wrapper {
display: block;
width: 175px !important;
height: 175px !important;
border: 10px solid #ffffff;
border-radius: 50%;
}
div#FlipWrapper div.ShopLogo {
width: inherit !important;
height: inherit !important;
background-color: #241f20;
position: absolute !important;
z-index: 99;
top: 32%;
left: 0;
overflow: hidden;
border-radius: 50%;
}
div#FlipWrapper div.ShopLogo div.Inner {
width: 100%;
height: 100%;
padding: 35px;
}
div#FlipWrapper div.ShopLogo div.Inner > img {
width: 100%;
transform: scale(1.1) rotate(-8deg);
}
div#FlipWrapper div.ShopLogo div.Inner p {
color: #ffffff;
transform: rotate(-12deg);
line-height: 43px;
text-align: center;
display: inline;
font-size: 52px;
font-family: "AmaticBold", sans-serif;
margin-left: 10px;
margin-top: 40px;
}
div#FlipWrapper div.ShopLogo div.Inner p span {
display: block;
font-size: 42px;
}<script
src="https://code.jquery.com/jquery-3.3.1.js"
integrity="sha256-2Kok7MbOyxpgUVvAk/HJ2jigOSYS2auK4Pfzbm7uH60="
crossorigin="anonymous"></script>
<div id="FlipWrapper">
<div class="ShopLogo front">
<div class="Wrapper">
<div id="FlipCoinFront" class="Inner valign-wrapper">
<p>shop <span class="In"> - in - </span>shop</p>
</div>
</div>
</div>
<div class="ShopLogo back">
<div class="Wrapper">
<div id="FlipCoinBack" class="Inner valign-wrapper"></div>
</div>
</div>
</div> javascript jquery html css border
javascript jquery html css border
asked Nov 16 '18 at 9:15
S. ter KeursS. ter Keurs
1518
asked Nov 16 '18 at 9:15
S. ter KeursS. ter Keurs
1518
asked Nov 16 '18 at 9:15
S. ter KeursS. ter Keurs
1518
asked Nov 16 '18 at 9:15
S. ter KeursS. ter Keurs
1518
asked Nov 16 '18 at 9:15
S. ter KeursS. ter Keurs
1518
1518
add a comment |
add a comment |
1 Answer
1
active
oldest
votes
0
The issue is because the background of div#FlipWrapper div.ShopLogo is showing under the border of the child div#FlipWrapper div.Wrapper. To fix the problem, move the border and border-radius settings to div#FlipWrapper div.ShopLogo:
/*! flip - v1.1.2 - 2016-10-20
* https://github.com/nnattawat/flip
* Copyright (c) 2016 Nattawat Nonsung; Licensed MIT */
(function($) {
/*
* Private attributes and method
*/
// Function from David Walsh: http://davidwalsh.name/css-animation-callback licensed with http://opensource.org/licenses/MIT
var whichTransitionEvent = function() {
var t, el = document.createElement("fakeelement"),
transitions = {
"transition": "transitionend",
"OTransition": "oTransitionEnd",
"MozTransition": "transitionend",
"WebkitTransition": "webkitTransitionEnd"
};
for (t in transitions) {
if (el.style[t] !== undefined) {
return transitions[t];
}
}
};
/*
* Model declaration
*/
var Flip = function($el, options, callback) {
// Define default setting
this.setting = {
axis: "y",
reverse: false,
trigger: "click",
speed: 500,
forceHeight: false,
forceWidth: false,
autoSize: true,
front: '.front',
back: '.back'
};
this.setting = $.extend(this.setting, options);
if (typeof options.axis === 'string' && (options.axis.toLowerCase() === 'x' || options.axis.toLowerCase() === 'y')) {
this.setting.axis = options.axis.toLowerCase();
}
if (typeof options.reverse === "boolean") {
this.setting.reverse = options.reverse;
}
if (typeof options.trigger === 'string') {
this.setting.trigger = options.trigger.toLowerCase();
}
var speed = parseInt(options.speed);
if (!isNaN(speed)) {
this.setting.speed = speed;
}
if (typeof options.forceHeight === "boolean") {
this.setting.forceHeight = options.forceHeight;
}
if (typeof options.forceWidth === "boolean") {
this.setting.forceWidth = options.forceWidth;
}
if (typeof options.autoSize === "boolean") {
this.setting.autoSize = options.autoSize;
}
if (typeof options.front === 'string' || options.front instanceof $) {
this.setting.front = options.front;
}
if (typeof options.back === 'string' || options.back instanceof $) {
this.setting.back = options.back;
}
// Other attributes
this.element = $el;
this.frontElement = this.getFrontElement();
this.backElement = this.getBackElement();
this.isFlipped = false;
this.init(callback);
};
/*
* Public methods
*/
$.extend(Flip.prototype, {
flipDone: function(callback) {
var self = this;
// Providing a nicely wrapped up callback because transform is essentially async
self.element.one(whichTransitionEvent(), function() {
self.element.trigger('flip:done');
if (typeof callback === 'function') {
callback.call(self.element);
}
});
},
flip: function(callback) {
if (this.isFlipped) {
return;
}
this.isFlipped = true;
var rotateAxis = "rotate" + this.setting.axis;
this.frontElement.css({
transform: rotateAxis + (this.setting.reverse ? "(-180deg)" : "(180deg)"),
"z-index": "0"
});
this.backElement.css({
transform: rotateAxis + "(0deg)",
"z-index": "1"
});
this.flipDone(callback);
},
unflip: function(callback) {
if (!this.isFlipped) {
return;
}
this.isFlipped = false;
var rotateAxis = "rotate" + this.setting.axis;
this.frontElement.css({
transform: rotateAxis + "(0deg)",
"z-index": "1"
});
this.backElement.css({
transform: rotateAxis + (this.setting.reverse ? "(180deg)" : "(-180deg)"),
"z-index": "0"
});
this.flipDone(callback);
},
getFrontElement: function() {
if (this.setting.front instanceof $) {
return this.setting.front;
} else {
return this.element.find(this.setting.front);
}
},
getBackElement: function() {
if (this.setting.back instanceof $) {
return this.setting.back;
} else {
return this.element.find(this.setting.back);
}
},
init: function(callback) {
var self = this;
var faces = self.frontElement.add(self.backElement);
var rotateAxis = "rotate" + self.setting.axis;
var perspective = self.element["outer" + (rotateAxis === "rotatex" ? "Height" : "Width")]() * 2;
var elementCss = {
'perspective': perspective,
'position': 'relative'
};
var backElementCss = {
"transform": rotateAxis + "(" + (self.setting.reverse ? "180deg" : "-180deg") + ")",
"z-index": "0",
"position": "relative"
};
var faceElementCss = {
"backface-visibility": "hidden",
"transform-style": "preserve-3d",
"position": "absolute",
"z-index": "1"
};
if (self.setting.forceHeight) {
faces.outerHeight(self.element.height());
} else if (self.setting.autoSize) {
faceElementCss.height = '100%';
}
if (self.setting.forceWidth) {
faces.outerWidth(self.element.width());
} else if (self.setting.autoSize) {
faceElementCss.width = '100%';
}
// Back face always visible on Chrome #39
if ((window.chrome || (window.Intl && Intl.v8BreakIterator)) && 'CSS' in window) {
//Blink Engine, add preserve-3d to self.element
elementCss["-webkit-transform-style"] = "preserve-3d";
}
faces.css(faceElementCss).find('*').css({
"backface-visibility": "hidden"
});
self.element.css(elementCss);
self.backElement.css(backElementCss);
// #39
// not forcing width/height may cause an initial flip to show up on
// page load when we apply the style to reverse the backface...
// To prevent self we first apply the basic styles and then give the
// browser a moment to apply them. Only afterwards do we add the transition.
setTimeout(function() {
// By now the browser should have applied the styles, so the transition
// will only affect subsequent flips.
var speedInSec = self.setting.speed / 1000 || 0.5;
faces.css({
"transition": "all " + speedInSec + "s ease-out"
});
// This allows flip to be called for setup with only a callback (default settings)
if (typeof callback === 'function') {
callback.call(self.element);
}
// While this used to work with a setTimeout of zero, at some point that became
// unstable and the initial flip returned. The reason for this is unknown but we
// will temporarily use a short delay of 20 to mitigate this issue.
}, 20);
self.attachEvents();
},
clickHandler: function(event) {
if (!event) {
event = window.event;
}
if (this.element.find($(event.target).closest('button, a, input[type="submit"]')).length) {
return;
}
if (this.isFlipped) {
this.unflip();
} else {
this.flip();
}
},
hoverHandler: function() {
var self = this;
self.element.off('mouseleave.flip');
self.flip();
setTimeout(function() {
self.element.on('mouseleave.flip', $.proxy(self.unflip, self));
if (!self.element.is(":hover")) {
self.unflip();
}
}, (self.setting.speed + 150));
},
attachEvents: function() {
var self = this;
if (self.setting.trigger === "click") {
self.element.on($.fn.tap ? "tap.flip" : "click.flip", $.proxy(self.clickHandler, self));
} else if (self.setting.trigger === "hover") {
self.element.on('mouseenter.flip', $.proxy(self.hoverHandler, self));
self.element.on('mouseleave.flip', $.proxy(self.unflip, self));
}
},
flipChanged: function(callback) {
this.element.trigger('flip:change');
if (typeof callback === 'function') {
callback.call(this.element);
}
},
changeSettings: function(options, callback) {
var self = this;
var changeNeeded = false;
if (options.axis !== undefined && self.setting.axis !== options.axis.toLowerCase()) {
self.setting.axis = options.axis.toLowerCase();
changeNeeded = true;
}
if (options.reverse !== undefined && self.setting.reverse !== options.reverse) {
self.setting.reverse = options.reverse;
changeNeeded = true;
}
if (changeNeeded) {
var faces = self.frontElement.add(self.backElement);
var savedTrans = faces.css(["transition-property", "transition-timing-function", "transition-duration", "transition-delay"]);
faces.css({
transition: "none"
});
// This sets up the first flip in the new direction automatically
var rotateAxis = "rotate" + self.setting.axis;
if (self.isFlipped) {
self.frontElement.css({
transform: rotateAxis + (self.setting.reverse ? "(-180deg)" : "(180deg)"),
"z-index": "0"
});
} else {
self.backElement.css({
transform: rotateAxis + (self.setting.reverse ? "(180deg)" : "(-180deg)"),
"z-index": "0"
});
}
// Providing a nicely wrapped up callback because transform is essentially async
setTimeout(function() {
faces.css(savedTrans);
self.flipChanged(callback);
}, 0);
} else {
// If we didnt have to set the axis we can just call back.
self.flipChanged(callback);
}
}
});
/*
* jQuery collection methods
*/
$.fn.flip = function(options, callback) {
if (typeof options === 'function') {
callback = options;
}
if (typeof options === "string" || typeof options === "boolean") {
this.each(function() {
var flip = $(this).data('flip-model');
if (options === "toggle") {
options = !flip.isFlipped;
}
if (options) {
flip.flip(callback);
} else {
flip.unflip(callback);
}
});
} else {
this.each(function() {
if ($(this).data('flip-model')) { // The element has been initiated, all we have to do is change applicable settings
var flip = $(this).data('flip-model');
if (options && (options.axis !== undefined || options.reverse !== undefined)) {
flip.changeSettings(options, callback);
}
} else { // Init
$(this).data('flip-model', new Flip($(this), (options || {}), callback));
}
});
}
return this;
};
}(jQuery));
InitializeHeaderSlider();
// Trigger slide every 2 seconds
function InitializeHeaderSlider() {
var oInterval = setInterval(function() {
// Initialize flipper
var oFlip = $('#FlipWrapper').flip();
// Trigger flip toggle
oFlip.flip('toggle');
console.log('flipped');
}, 2000);
}html {
background-color: #CCC; /* just for demo purpose */
}
div#FlipWrapper {
z-index: 999 !important;
top: 38%;
pointer-events: none;
transform: translateX(-3%) skew(16deg);
position: relative;
}
div#FlipWrapper div.Wrapper {
display: block;
width: 175px !important;
height: 175px !important;
}
div#FlipWrapper div.ShopLogo {
width: inherit !important;
height: inherit !important;
background-color: #241f20;
border: 10px solid #ffffff;
border-radius: 50%;
position: absolute !important;
z-index: 99;
top: 32%;
left: 0;
overflow: hidden;
border-radius: 50%;
}
div#FlipWrapper div.ShopLogo div.Inner {
width: 100%;
height: 100%;
padding: 35px;
}
div#FlipWrapper div.ShopLogo div.Inner>img {
width: 100%;
transform: scale(1.1) rotate(-8deg);
}
div#FlipWrapper div.ShopLogo div.Inner p {
color: #ffffff;
transform: rotate(-12deg);
line-height: 43px;
text-align: center;
display: inline;
font-size: 52px;
font-family: "AmaticBold", sans-serif;
margin-left: 10px;
margin-top: 40px;
}
div#FlipWrapper div.ShopLogo div.Inner p span {
display: block;
font-size: 42px;
}<script src="https://code.jquery.com/jquery-3.3.1.js" integrity="sha256-2Kok7MbOyxpgUVvAk/HJ2jigOSYS2auK4Pfzbm7uH60=" crossorigin="anonymous"></script>
<div id="FlipWrapper">
<div class="ShopLogo front">
<div class="Wrapper">
<div id="FlipCoinFront" class="Inner valign-wrapper">
<p>shop <span class="In"> - in - </span>shop</p>
</div>
</div>
</div>
<div class="ShopLogo back">
<div class="Wrapper">
<div id="FlipCoinBack" class="Inner valign-wrapper"></div>
</div>
</div>
</div>answered Nov 16 '18 at 9:23
Rory McCrossanRory McCrossan
250k29217254
Thanks for the answer! I didn't know borders where affected by their parents if the width and height is the same! (I'm aware I should have tested that before posting hehe). Only thing left to do is some basic repositioning and we're good to go!
– S. ter Keurs
Nov 16 '18 at 9:40
add a comment |
Your Answer
StackExchange.ifUsing("editor", function () {
StackExchange.using("externalEditor", function () {
StackExchange.using("snippets", function () {
StackExchange.snippets.init();
});
});
}, "code-snippets");
StackExchange.ready(function() {
var channelOptions = {
tags: "".split(" "),
id: "1"
};
initTagRenderer("".split(" "), "".split(" "), channelOptions);
StackExchange.using("externalEditor", function() {
// Have to fire editor after snippets, if snippets enabled
if (StackExchange.settings.snippets.snippetsEnabled) {
StackExchange.using("snippets", function() {
createEditor();
});
}
else {
createEditor();
}
});
function createEditor() {
StackExchange.prepareEditor({
heartbeatType: 'answer',
autoActivateHeartbeat: false,
convertImagesToLinks: true,
noModals: true,
showLowRepImageUploadWarning: true,
reputationToPostImages: 10,
bindNavPrevention: true,
postfix: "",
imageUploader: {
brandingHtml: "Powered by u003ca class="icon-imgur-white" href="https://imgur.com/"u003eu003c/au003e",
contentPolicyHtml: "User contributions licensed under u003ca href="https://creativecommons.org/licenses/by-sa/3.0/"u003ecc by-sa 3.0 with attribution requiredu003c/au003e u003ca href="https://stackoverflow.com/legal/content-policy"u003e(content policy)u003c/au003e",
allowUrls: true
},
onDemand: true,
discardSelector: ".discard-answer"
,immediatelyShowMarkdownHelp:true
});
}
});
draft saved
draft discarded
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
StackExchange.ready(
function () {
StackExchange.openid.initPostLogin('.new-post-login', 'https%3a%2f%2fstackoverflow.com%2fquestions%2f53334708%2fborder-on-circle-creates-1px-of-black-outline%23new-answer', 'question_page');
}
);
Post as a guest
Required, but never shown
1 Answer
1
active
oldest
votes
1 Answer
1
active
oldest
votes
active
oldest
votes
active
oldest
votes
0
The issue is because the background of div#FlipWrapper div.ShopLogo is showing under the border of the child div#FlipWrapper div.Wrapper. To fix the problem, move the border and border-radius settings to div#FlipWrapper div.ShopLogo:
/*! flip - v1.1.2 - 2016-10-20
* https://github.com/nnattawat/flip
* Copyright (c) 2016 Nattawat Nonsung; Licensed MIT */
(function($) {
/*
* Private attributes and method
*/
// Function from David Walsh: http://davidwalsh.name/css-animation-callback licensed with http://opensource.org/licenses/MIT
var whichTransitionEvent = function() {
var t, el = document.createElement("fakeelement"),
transitions = {
"transition": "transitionend",
"OTransition": "oTransitionEnd",
"MozTransition": "transitionend",
"WebkitTransition": "webkitTransitionEnd"
};
for (t in transitions) {
if (el.style[t] !== undefined) {
return transitions[t];
}
}
};
/*
* Model declaration
*/
var Flip = function($el, options, callback) {
// Define default setting
this.setting = {
axis: "y",
reverse: false,
trigger: "click",
speed: 500,
forceHeight: false,
forceWidth: false,
autoSize: true,
front: '.front',
back: '.back'
};
this.setting = $.extend(this.setting, options);
if (typeof options.axis === 'string' && (options.axis.toLowerCase() === 'x' || options.axis.toLowerCase() === 'y')) {
this.setting.axis = options.axis.toLowerCase();
}
if (typeof options.reverse === "boolean") {
this.setting.reverse = options.reverse;
}
if (typeof options.trigger === 'string') {
this.setting.trigger = options.trigger.toLowerCase();
}
var speed = parseInt(options.speed);
if (!isNaN(speed)) {
this.setting.speed = speed;
}
if (typeof options.forceHeight === "boolean") {
this.setting.forceHeight = options.forceHeight;
}
if (typeof options.forceWidth === "boolean") {
this.setting.forceWidth = options.forceWidth;
}
if (typeof options.autoSize === "boolean") {
this.setting.autoSize = options.autoSize;
}
if (typeof options.front === 'string' || options.front instanceof $) {
this.setting.front = options.front;
}
if (typeof options.back === 'string' || options.back instanceof $) {
this.setting.back = options.back;
}
// Other attributes
this.element = $el;
this.frontElement = this.getFrontElement();
this.backElement = this.getBackElement();
this.isFlipped = false;
this.init(callback);
};
/*
* Public methods
*/
$.extend(Flip.prototype, {
flipDone: function(callback) {
var self = this;
// Providing a nicely wrapped up callback because transform is essentially async
self.element.one(whichTransitionEvent(), function() {
self.element.trigger('flip:done');
if (typeof callback === 'function') {
callback.call(self.element);
}
});
},
flip: function(callback) {
if (this.isFlipped) {
return;
}
this.isFlipped = true;
var rotateAxis = "rotate" + this.setting.axis;
this.frontElement.css({
transform: rotateAxis + (this.setting.reverse ? "(-180deg)" : "(180deg)"),
"z-index": "0"
});
this.backElement.css({
transform: rotateAxis + "(0deg)",
"z-index": "1"
});
this.flipDone(callback);
},
unflip: function(callback) {
if (!this.isFlipped) {
return;
}
this.isFlipped = false;
var rotateAxis = "rotate" + this.setting.axis;
this.frontElement.css({
transform: rotateAxis + "(0deg)",
"z-index": "1"
});
this.backElement.css({
transform: rotateAxis + (this.setting.reverse ? "(180deg)" : "(-180deg)"),
"z-index": "0"
});
this.flipDone(callback);
},
getFrontElement: function() {
if (this.setting.front instanceof $) {
return this.setting.front;
} else {
return this.element.find(this.setting.front);
}
},
getBackElement: function() {
if (this.setting.back instanceof $) {
return this.setting.back;
} else {
return this.element.find(this.setting.back);
}
},
init: function(callback) {
var self = this;
var faces = self.frontElement.add(self.backElement);
var rotateAxis = "rotate" + self.setting.axis;
var perspective = self.element["outer" + (rotateAxis === "rotatex" ? "Height" : "Width")]() * 2;
var elementCss = {
'perspective': perspective,
'position': 'relative'
};
var backElementCss = {
"transform": rotateAxis + "(" + (self.setting.reverse ? "180deg" : "-180deg") + ")",
"z-index": "0",
"position": "relative"
};
var faceElementCss = {
"backface-visibility": "hidden",
"transform-style": "preserve-3d",
"position": "absolute",
"z-index": "1"
};
if (self.setting.forceHeight) {
faces.outerHeight(self.element.height());
} else if (self.setting.autoSize) {
faceElementCss.height = '100%';
}
if (self.setting.forceWidth) {
faces.outerWidth(self.element.width());
} else if (self.setting.autoSize) {
faceElementCss.width = '100%';
}
// Back face always visible on Chrome #39
if ((window.chrome || (window.Intl && Intl.v8BreakIterator)) && 'CSS' in window) {
//Blink Engine, add preserve-3d to self.element
elementCss["-webkit-transform-style"] = "preserve-3d";
}
faces.css(faceElementCss).find('*').css({
"backface-visibility": "hidden"
});
self.element.css(elementCss);
self.backElement.css(backElementCss);
// #39
// not forcing width/height may cause an initial flip to show up on
// page load when we apply the style to reverse the backface...
// To prevent self we first apply the basic styles and then give the
// browser a moment to apply them. Only afterwards do we add the transition.
setTimeout(function() {
// By now the browser should have applied the styles, so the transition
// will only affect subsequent flips.
var speedInSec = self.setting.speed / 1000 || 0.5;
faces.css({
"transition": "all " + speedInSec + "s ease-out"
});
// This allows flip to be called for setup with only a callback (default settings)
if (typeof callback === 'function') {
callback.call(self.element);
}
// While this used to work with a setTimeout of zero, at some point that became
// unstable and the initial flip returned. The reason for this is unknown but we
// will temporarily use a short delay of 20 to mitigate this issue.
}, 20);
self.attachEvents();
},
clickHandler: function(event) {
if (!event) {
event = window.event;
}
if (this.element.find($(event.target).closest('button, a, input[type="submit"]')).length) {
return;
}
if (this.isFlipped) {
this.unflip();
} else {
this.flip();
}
},
hoverHandler: function() {
var self = this;
self.element.off('mouseleave.flip');
self.flip();
setTimeout(function() {
self.element.on('mouseleave.flip', $.proxy(self.unflip, self));
if (!self.element.is(":hover")) {
self.unflip();
}
}, (self.setting.speed + 150));
},
attachEvents: function() {
var self = this;
if (self.setting.trigger === "click") {
self.element.on($.fn.tap ? "tap.flip" : "click.flip", $.proxy(self.clickHandler, self));
} else if (self.setting.trigger === "hover") {
self.element.on('mouseenter.flip', $.proxy(self.hoverHandler, self));
self.element.on('mouseleave.flip', $.proxy(self.unflip, self));
}
},
flipChanged: function(callback) {
this.element.trigger('flip:change');
if (typeof callback === 'function') {
callback.call(this.element);
}
},
changeSettings: function(options, callback) {
var self = this;
var changeNeeded = false;
if (options.axis !== undefined && self.setting.axis !== options.axis.toLowerCase()) {
self.setting.axis = options.axis.toLowerCase();
changeNeeded = true;
}
if (options.reverse !== undefined && self.setting.reverse !== options.reverse) {
self.setting.reverse = options.reverse;
changeNeeded = true;
}
if (changeNeeded) {
var faces = self.frontElement.add(self.backElement);
var savedTrans = faces.css(["transition-property", "transition-timing-function", "transition-duration", "transition-delay"]);
faces.css({
transition: "none"
});
// This sets up the first flip in the new direction automatically
var rotateAxis = "rotate" + self.setting.axis;
if (self.isFlipped) {
self.frontElement.css({
transform: rotateAxis + (self.setting.reverse ? "(-180deg)" : "(180deg)"),
"z-index": "0"
});
} else {
self.backElement.css({
transform: rotateAxis + (self.setting.reverse ? "(180deg)" : "(-180deg)"),
"z-index": "0"
});
}
// Providing a nicely wrapped up callback because transform is essentially async
setTimeout(function() {
faces.css(savedTrans);
self.flipChanged(callback);
}, 0);
} else {
// If we didnt have to set the axis we can just call back.
self.flipChanged(callback);
}
}
});
/*
* jQuery collection methods
*/
$.fn.flip = function(options, callback) {
if (typeof options === 'function') {
callback = options;
}
if (typeof options === "string" || typeof options === "boolean") {
this.each(function() {
var flip = $(this).data('flip-model');
if (options === "toggle") {
options = !flip.isFlipped;
}
if (options) {
flip.flip(callback);
} else {
flip.unflip(callback);
}
});
} else {
this.each(function() {
if ($(this).data('flip-model')) { // The element has been initiated, all we have to do is change applicable settings
var flip = $(this).data('flip-model');
if (options && (options.axis !== undefined || options.reverse !== undefined)) {
flip.changeSettings(options, callback);
}
} else { // Init
$(this).data('flip-model', new Flip($(this), (options || {}), callback));
}
});
}
return this;
};
}(jQuery));
InitializeHeaderSlider();
// Trigger slide every 2 seconds
function InitializeHeaderSlider() {
var oInterval = setInterval(function() {
// Initialize flipper
var oFlip = $('#FlipWrapper').flip();
// Trigger flip toggle
oFlip.flip('toggle');
console.log('flipped');
}, 2000);
}html {
background-color: #CCC; /* just for demo purpose */
}
div#FlipWrapper {
z-index: 999 !important;
top: 38%;
pointer-events: none;
transform: translateX(-3%) skew(16deg);
position: relative;
}
div#FlipWrapper div.Wrapper {
display: block;
width: 175px !important;
height: 175px !important;
}
div#FlipWrapper div.ShopLogo {
width: inherit !important;
height: inherit !important;
background-color: #241f20;
border: 10px solid #ffffff;
border-radius: 50%;
position: absolute !important;
z-index: 99;
top: 32%;
left: 0;
overflow: hidden;
border-radius: 50%;
}
div#FlipWrapper div.ShopLogo div.Inner {
width: 100%;
height: 100%;
padding: 35px;
}
div#FlipWrapper div.ShopLogo div.Inner>img {
width: 100%;
transform: scale(1.1) rotate(-8deg);
}
div#FlipWrapper div.ShopLogo div.Inner p {
color: #ffffff;
transform: rotate(-12deg);
line-height: 43px;
text-align: center;
display: inline;
font-size: 52px;
font-family: "AmaticBold", sans-serif;
margin-left: 10px;
margin-top: 40px;
}
div#FlipWrapper div.ShopLogo div.Inner p span {
display: block;
font-size: 42px;
}<script src="https://code.jquery.com/jquery-3.3.1.js" integrity="sha256-2Kok7MbOyxpgUVvAk/HJ2jigOSYS2auK4Pfzbm7uH60=" crossorigin="anonymous"></script>
<div id="FlipWrapper">
<div class="ShopLogo front">
<div class="Wrapper">
<div id="FlipCoinFront" class="Inner valign-wrapper">
<p>shop <span class="In"> - in - </span>shop</p>
</div>
</div>
</div>
<div class="ShopLogo back">
<div class="Wrapper">
<div id="FlipCoinBack" class="Inner valign-wrapper"></div>
</div>
</div>
</div>answered Nov 16 '18 at 9:23
Rory McCrossanRory McCrossan
250k29217254
Thanks for the answer! I didn't know borders where affected by their parents if the width and height is the same! (I'm aware I should have tested that before posting hehe). Only thing left to do is some basic repositioning and we're good to go!
– S. ter Keurs
Nov 16 '18 at 9:40
add a comment |
0
The issue is because the background of div#FlipWrapper div.ShopLogo is showing under the border of the child div#FlipWrapper div.Wrapper. To fix the problem, move the border and border-radius settings to div#FlipWrapper div.ShopLogo:
/*! flip - v1.1.2 - 2016-10-20
* https://github.com/nnattawat/flip
* Copyright (c) 2016 Nattawat Nonsung; Licensed MIT */
(function($) {
/*
* Private attributes and method
*/
// Function from David Walsh: http://davidwalsh.name/css-animation-callback licensed with http://opensource.org/licenses/MIT
var whichTransitionEvent = function() {
var t, el = document.createElement("fakeelement"),
transitions = {
"transition": "transitionend",
"OTransition": "oTransitionEnd",
"MozTransition": "transitionend",
"WebkitTransition": "webkitTransitionEnd"
};
for (t in transitions) {
if (el.style[t] !== undefined) {
return transitions[t];
}
}
};
/*
* Model declaration
*/
var Flip = function($el, options, callback) {
// Define default setting
this.setting = {
axis: "y",
reverse: false,
trigger: "click",
speed: 500,
forceHeight: false,
forceWidth: false,
autoSize: true,
front: '.front',
back: '.back'
};
this.setting = $.extend(this.setting, options);
if (typeof options.axis === 'string' && (options.axis.toLowerCase() === 'x' || options.axis.toLowerCase() === 'y')) {
this.setting.axis = options.axis.toLowerCase();
}
if (typeof options.reverse === "boolean") {
this.setting.reverse = options.reverse;
}
if (typeof options.trigger === 'string') {
this.setting.trigger = options.trigger.toLowerCase();
}
var speed = parseInt(options.speed);
if (!isNaN(speed)) {
this.setting.speed = speed;
}
if (typeof options.forceHeight === "boolean") {
this.setting.forceHeight = options.forceHeight;
}
if (typeof options.forceWidth === "boolean") {
this.setting.forceWidth = options.forceWidth;
}
if (typeof options.autoSize === "boolean") {
this.setting.autoSize = options.autoSize;
}
if (typeof options.front === 'string' || options.front instanceof $) {
this.setting.front = options.front;
}
if (typeof options.back === 'string' || options.back instanceof $) {
this.setting.back = options.back;
}
// Other attributes
this.element = $el;
this.frontElement = this.getFrontElement();
this.backElement = this.getBackElement();
this.isFlipped = false;
this.init(callback);
};
/*
* Public methods
*/
$.extend(Flip.prototype, {
flipDone: function(callback) {
var self = this;
// Providing a nicely wrapped up callback because transform is essentially async
self.element.one(whichTransitionEvent(), function() {
self.element.trigger('flip:done');
if (typeof callback === 'function') {
callback.call(self.element);
}
});
},
flip: function(callback) {
if (this.isFlipped) {
return;
}
this.isFlipped = true;
var rotateAxis = "rotate" + this.setting.axis;
this.frontElement.css({
transform: rotateAxis + (this.setting.reverse ? "(-180deg)" : "(180deg)"),
"z-index": "0"
});
this.backElement.css({
transform: rotateAxis + "(0deg)",
"z-index": "1"
});
this.flipDone(callback);
},
unflip: function(callback) {
if (!this.isFlipped) {
return;
}
this.isFlipped = false;
var rotateAxis = "rotate" + this.setting.axis;
this.frontElement.css({
transform: rotateAxis + "(0deg)",
"z-index": "1"
});
this.backElement.css({
transform: rotateAxis + (this.setting.reverse ? "(180deg)" : "(-180deg)"),
"z-index": "0"
});
this.flipDone(callback);
},
getFrontElement: function() {
if (this.setting.front instanceof $) {
return this.setting.front;
} else {
return this.element.find(this.setting.front);
}
},
getBackElement: function() {
if (this.setting.back instanceof $) {
return this.setting.back;
} else {
return this.element.find(this.setting.back);
}
},
init: function(callback) {
var self = this;
var faces = self.frontElement.add(self.backElement);
var rotateAxis = "rotate" + self.setting.axis;
var perspective = self.element["outer" + (rotateAxis === "rotatex" ? "Height" : "Width")]() * 2;
var elementCss = {
'perspective': perspective,
'position': 'relative'
};
var backElementCss = {
"transform": rotateAxis + "(" + (self.setting.reverse ? "180deg" : "-180deg") + ")",
"z-index": "0",
"position": "relative"
};
var faceElementCss = {
"backface-visibility": "hidden",
"transform-style": "preserve-3d",
"position": "absolute",
"z-index": "1"
};
if (self.setting.forceHeight) {
faces.outerHeight(self.element.height());
} else if (self.setting.autoSize) {
faceElementCss.height = '100%';
}
if (self.setting.forceWidth) {
faces.outerWidth(self.element.width());
} else if (self.setting.autoSize) {
faceElementCss.width = '100%';
}
// Back face always visible on Chrome #39
if ((window.chrome || (window.Intl && Intl.v8BreakIterator)) && 'CSS' in window) {
//Blink Engine, add preserve-3d to self.element
elementCss["-webkit-transform-style"] = "preserve-3d";
}
faces.css(faceElementCss).find('*').css({
"backface-visibility": "hidden"
});
self.element.css(elementCss);
self.backElement.css(backElementCss);
// #39
// not forcing width/height may cause an initial flip to show up on
// page load when we apply the style to reverse the backface...
// To prevent self we first apply the basic styles and then give the
// browser a moment to apply them. Only afterwards do we add the transition.
setTimeout(function() {
// By now the browser should have applied the styles, so the transition
// will only affect subsequent flips.
var speedInSec = self.setting.speed / 1000 || 0.5;
faces.css({
"transition": "all " + speedInSec + "s ease-out"
});
// This allows flip to be called for setup with only a callback (default settings)
if (typeof callback === 'function') {
callback.call(self.element);
}
// While this used to work with a setTimeout of zero, at some point that became
// unstable and the initial flip returned. The reason for this is unknown but we
// will temporarily use a short delay of 20 to mitigate this issue.
}, 20);
self.attachEvents();
},
clickHandler: function(event) {
if (!event) {
event = window.event;
}
if (this.element.find($(event.target).closest('button, a, input[type="submit"]')).length) {
return;
}
if (this.isFlipped) {
this.unflip();
} else {
this.flip();
}
},
hoverHandler: function() {
var self = this;
self.element.off('mouseleave.flip');
self.flip();
setTimeout(function() {
self.element.on('mouseleave.flip', $.proxy(self.unflip, self));
if (!self.element.is(":hover")) {
self.unflip();
}
}, (self.setting.speed + 150));
},
attachEvents: function() {
var self = this;
if (self.setting.trigger === "click") {
self.element.on($.fn.tap ? "tap.flip" : "click.flip", $.proxy(self.clickHandler, self));
} else if (self.setting.trigger === "hover") {
self.element.on('mouseenter.flip', $.proxy(self.hoverHandler, self));
self.element.on('mouseleave.flip', $.proxy(self.unflip, self));
}
},
flipChanged: function(callback) {
this.element.trigger('flip:change');
if (typeof callback === 'function') {
callback.call(this.element);
}
},
changeSettings: function(options, callback) {
var self = this;
var changeNeeded = false;
if (options.axis !== undefined && self.setting.axis !== options.axis.toLowerCase()) {
self.setting.axis = options.axis.toLowerCase();
changeNeeded = true;
}
if (options.reverse !== undefined && self.setting.reverse !== options.reverse) {
self.setting.reverse = options.reverse;
changeNeeded = true;
}
if (changeNeeded) {
var faces = self.frontElement.add(self.backElement);
var savedTrans = faces.css(["transition-property", "transition-timing-function", "transition-duration", "transition-delay"]);
faces.css({
transition: "none"
});
// This sets up the first flip in the new direction automatically
var rotateAxis = "rotate" + self.setting.axis;
if (self.isFlipped) {
self.frontElement.css({
transform: rotateAxis + (self.setting.reverse ? "(-180deg)" : "(180deg)"),
"z-index": "0"
});
} else {
self.backElement.css({
transform: rotateAxis + (self.setting.reverse ? "(180deg)" : "(-180deg)"),
"z-index": "0"
});
}
// Providing a nicely wrapped up callback because transform is essentially async
setTimeout(function() {
faces.css(savedTrans);
self.flipChanged(callback);
}, 0);
} else {
// If we didnt have to set the axis we can just call back.
self.flipChanged(callback);
}
}
});
/*
* jQuery collection methods
*/
$.fn.flip = function(options, callback) {
if (typeof options === 'function') {
callback = options;
}
if (typeof options === "string" || typeof options === "boolean") {
this.each(function() {
var flip = $(this).data('flip-model');
if (options === "toggle") {
options = !flip.isFlipped;
}
if (options) {
flip.flip(callback);
} else {
flip.unflip(callback);
}
});
} else {
this.each(function() {
if ($(this).data('flip-model')) { // The element has been initiated, all we have to do is change applicable settings
var flip = $(this).data('flip-model');
if (options && (options.axis !== undefined || options.reverse !== undefined)) {
flip.changeSettings(options, callback);
}
} else { // Init
$(this).data('flip-model', new Flip($(this), (options || {}), callback));
}
});
}
return this;
};
}(jQuery));
InitializeHeaderSlider();
// Trigger slide every 2 seconds
function InitializeHeaderSlider() {
var oInterval = setInterval(function() {
// Initialize flipper
var oFlip = $('#FlipWrapper').flip();
// Trigger flip toggle
oFlip.flip('toggle');
console.log('flipped');
}, 2000);
}html {
background-color: #CCC; /* just for demo purpose */
}
div#FlipWrapper {
z-index: 999 !important;
top: 38%;
pointer-events: none;
transform: translateX(-3%) skew(16deg);
position: relative;
}
div#FlipWrapper div.Wrapper {
display: block;
width: 175px !important;
height: 175px !important;
}
div#FlipWrapper div.ShopLogo {
width: inherit !important;
height: inherit !important;
background-color: #241f20;
border: 10px solid #ffffff;
border-radius: 50%;
position: absolute !important;
z-index: 99;
top: 32%;
left: 0;
overflow: hidden;
border-radius: 50%;
}
div#FlipWrapper div.ShopLogo div.Inner {
width: 100%;
height: 100%;
padding: 35px;
}
div#FlipWrapper div.ShopLogo div.Inner>img {
width: 100%;
transform: scale(1.1) rotate(-8deg);
}
div#FlipWrapper div.ShopLogo div.Inner p {
color: #ffffff;
transform: rotate(-12deg);
line-height: 43px;
text-align: center;
display: inline;
font-size: 52px;
font-family: "AmaticBold", sans-serif;
margin-left: 10px;
margin-top: 40px;
}
div#FlipWrapper div.ShopLogo div.Inner p span {
display: block;
font-size: 42px;
}<script src="https://code.jquery.com/jquery-3.3.1.js" integrity="sha256-2Kok7MbOyxpgUVvAk/HJ2jigOSYS2auK4Pfzbm7uH60=" crossorigin="anonymous"></script>
<div id="FlipWrapper">
<div class="ShopLogo front">
<div class="Wrapper">
<div id="FlipCoinFront" class="Inner valign-wrapper">
<p>shop <span class="In"> - in - </span>shop</p>
</div>
</div>
</div>
<div class="ShopLogo back">
<div class="Wrapper">
<div id="FlipCoinBack" class="Inner valign-wrapper"></div>
</div>
</div>
</div>answered Nov 16 '18 at 9:23
Rory McCrossanRory McCrossan
250k29217254
Thanks for the answer! I didn't know borders where affected by their parents if the width and height is the same! (I'm aware I should have tested that before posting hehe). Only thing left to do is some basic repositioning and we're good to go!
– S. ter Keurs
Nov 16 '18 at 9:40
add a comment |
0
0
0
The issue is because the background of div#FlipWrapper div.ShopLogo is showing under the border of the child div#FlipWrapper div.Wrapper. To fix the problem, move the border and border-radius settings to div#FlipWrapper div.ShopLogo:
/*! flip - v1.1.2 - 2016-10-20
* https://github.com/nnattawat/flip
* Copyright (c) 2016 Nattawat Nonsung; Licensed MIT */
(function($) {
/*
* Private attributes and method
*/
// Function from David Walsh: http://davidwalsh.name/css-animation-callback licensed with http://opensource.org/licenses/MIT
var whichTransitionEvent = function() {
var t, el = document.createElement("fakeelement"),
transitions = {
"transition": "transitionend",
"OTransition": "oTransitionEnd",
"MozTransition": "transitionend",
"WebkitTransition": "webkitTransitionEnd"
};
for (t in transitions) {
if (el.style[t] !== undefined) {
return transitions[t];
}
}
};
/*
* Model declaration
*/
var Flip = function($el, options, callback) {
// Define default setting
this.setting = {
axis: "y",
reverse: false,
trigger: "click",
speed: 500,
forceHeight: false,
forceWidth: false,
autoSize: true,
front: '.front',
back: '.back'
};
this.setting = $.extend(this.setting, options);
if (typeof options.axis === 'string' && (options.axis.toLowerCase() === 'x' || options.axis.toLowerCase() === 'y')) {
this.setting.axis = options.axis.toLowerCase();
}
if (typeof options.reverse === "boolean") {
this.setting.reverse = options.reverse;
}
if (typeof options.trigger === 'string') {
this.setting.trigger = options.trigger.toLowerCase();
}
var speed = parseInt(options.speed);
if (!isNaN(speed)) {
this.setting.speed = speed;
}
if (typeof options.forceHeight === "boolean") {
this.setting.forceHeight = options.forceHeight;
}
if (typeof options.forceWidth === "boolean") {
this.setting.forceWidth = options.forceWidth;
}
if (typeof options.autoSize === "boolean") {
this.setting.autoSize = options.autoSize;
}
if (typeof options.front === 'string' || options.front instanceof $) {
this.setting.front = options.front;
}
if (typeof options.back === 'string' || options.back instanceof $) {
this.setting.back = options.back;
}
// Other attributes
this.element = $el;
this.frontElement = this.getFrontElement();
this.backElement = this.getBackElement();
this.isFlipped = false;
this.init(callback);
};
/*
* Public methods
*/
$.extend(Flip.prototype, {
flipDone: function(callback) {
var self = this;
// Providing a nicely wrapped up callback because transform is essentially async
self.element.one(whichTransitionEvent(), function() {
self.element.trigger('flip:done');
if (typeof callback === 'function') {
callback.call(self.element);
}
});
},
flip: function(callback) {
if (this.isFlipped) {
return;
}
this.isFlipped = true;
var rotateAxis = "rotate" + this.setting.axis;
this.frontElement.css({
transform: rotateAxis + (this.setting.reverse ? "(-180deg)" : "(180deg)"),
"z-index": "0"
});
this.backElement.css({
transform: rotateAxis + "(0deg)",
"z-index": "1"
});
this.flipDone(callback);
},
unflip: function(callback) {
if (!this.isFlipped) {
return;
}
this.isFlipped = false;
var rotateAxis = "rotate" + this.setting.axis;
this.frontElement.css({
transform: rotateAxis + "(0deg)",
"z-index": "1"
});
this.backElement.css({
transform: rotateAxis + (this.setting.reverse ? "(180deg)" : "(-180deg)"),
"z-index": "0"
});
this.flipDone(callback);
},
getFrontElement: function() {
if (this.setting.front instanceof $) {
return this.setting.front;
} else {
return this.element.find(this.setting.front);
}
},
getBackElement: function() {
if (this.setting.back instanceof $) {
return this.setting.back;
} else {
return this.element.find(this.setting.back);
}
},
init: function(callback) {
var self = this;
var faces = self.frontElement.add(self.backElement);
var rotateAxis = "rotate" + self.setting.axis;
var perspective = self.element["outer" + (rotateAxis === "rotatex" ? "Height" : "Width")]() * 2;
var elementCss = {
'perspective': perspective,
'position': 'relative'
};
var backElementCss = {
"transform": rotateAxis + "(" + (self.setting.reverse ? "180deg" : "-180deg") + ")",
"z-index": "0",
"position": "relative"
};
var faceElementCss = {
"backface-visibility": "hidden",
"transform-style": "preserve-3d",
"position": "absolute",
"z-index": "1"
};
if (self.setting.forceHeight) {
faces.outerHeight(self.element.height());
} else if (self.setting.autoSize) {
faceElementCss.height = '100%';
}
if (self.setting.forceWidth) {
faces.outerWidth(self.element.width());
} else if (self.setting.autoSize) {
faceElementCss.width = '100%';
}
// Back face always visible on Chrome #39
if ((window.chrome || (window.Intl && Intl.v8BreakIterator)) && 'CSS' in window) {
//Blink Engine, add preserve-3d to self.element
elementCss["-webkit-transform-style"] = "preserve-3d";
}
faces.css(faceElementCss).find('*').css({
"backface-visibility": "hidden"
});
self.element.css(elementCss);
self.backElement.css(backElementCss);
// #39
// not forcing width/height may cause an initial flip to show up on
// page load when we apply the style to reverse the backface...
// To prevent self we first apply the basic styles and then give the
// browser a moment to apply them. Only afterwards do we add the transition.
setTimeout(function() {
// By now the browser should have applied the styles, so the transition
// will only affect subsequent flips.
var speedInSec = self.setting.speed / 1000 || 0.5;
faces.css({
"transition": "all " + speedInSec + "s ease-out"
});
// This allows flip to be called for setup with only a callback (default settings)
if (typeof callback === 'function') {
callback.call(self.element);
}
// While this used to work with a setTimeout of zero, at some point that became
// unstable and the initial flip returned. The reason for this is unknown but we
// will temporarily use a short delay of 20 to mitigate this issue.
}, 20);
self.attachEvents();
},
clickHandler: function(event) {
if (!event) {
event = window.event;
}
if (this.element.find($(event.target).closest('button, a, input[type="submit"]')).length) {
return;
}
if (this.isFlipped) {
this.unflip();
} else {
this.flip();
}
},
hoverHandler: function() {
var self = this;
self.element.off('mouseleave.flip');
self.flip();
setTimeout(function() {
self.element.on('mouseleave.flip', $.proxy(self.unflip, self));
if (!self.element.is(":hover")) {
self.unflip();
}
}, (self.setting.speed + 150));
},
attachEvents: function() {
var self = this;
if (self.setting.trigger === "click") {
self.element.on($.fn.tap ? "tap.flip" : "click.flip", $.proxy(self.clickHandler, self));
} else if (self.setting.trigger === "hover") {
self.element.on('mouseenter.flip', $.proxy(self.hoverHandler, self));
self.element.on('mouseleave.flip', $.proxy(self.unflip, self));
}
},
flipChanged: function(callback) {
this.element.trigger('flip:change');
if (typeof callback === 'function') {
callback.call(this.element);
}
},
changeSettings: function(options, callback) {
var self = this;
var changeNeeded = false;
if (options.axis !== undefined && self.setting.axis !== options.axis.toLowerCase()) {
self.setting.axis = options.axis.toLowerCase();
changeNeeded = true;
}
if (options.reverse !== undefined && self.setting.reverse !== options.reverse) {
self.setting.reverse = options.reverse;
changeNeeded = true;
}
if (changeNeeded) {
var faces = self.frontElement.add(self.backElement);
var savedTrans = faces.css(["transition-property", "transition-timing-function", "transition-duration", "transition-delay"]);
faces.css({
transition: "none"
});
// This sets up the first flip in the new direction automatically
var rotateAxis = "rotate" + self.setting.axis;
if (self.isFlipped) {
self.frontElement.css({
transform: rotateAxis + (self.setting.reverse ? "(-180deg)" : "(180deg)"),
"z-index": "0"
});
} else {
self.backElement.css({
transform: rotateAxis + (self.setting.reverse ? "(180deg)" : "(-180deg)"),
"z-index": "0"
});
}
// Providing a nicely wrapped up callback because transform is essentially async
setTimeout(function() {
faces.css(savedTrans);
self.flipChanged(callback);
}, 0);
} else {
// If we didnt have to set the axis we can just call back.
self.flipChanged(callback);
}
}
});
/*
* jQuery collection methods
*/
$.fn.flip = function(options, callback) {
if (typeof options === 'function') {
callback = options;
}
if (typeof options === "string" || typeof options === "boolean") {
this.each(function() {
var flip = $(this).data('flip-model');
if (options === "toggle") {
options = !flip.isFlipped;
}
if (options) {
flip.flip(callback);
} else {
flip.unflip(callback);
}
});
} else {
this.each(function() {
if ($(this).data('flip-model')) { // The element has been initiated, all we have to do is change applicable settings
var flip = $(this).data('flip-model');
if (options && (options.axis !== undefined || options.reverse !== undefined)) {
flip.changeSettings(options, callback);
}
} else { // Init
$(this).data('flip-model', new Flip($(this), (options || {}), callback));
}
});
}
return this;
};
}(jQuery));
InitializeHeaderSlider();
// Trigger slide every 2 seconds
function InitializeHeaderSlider() {
var oInterval = setInterval(function() {
// Initialize flipper
var oFlip = $('#FlipWrapper').flip();
// Trigger flip toggle
oFlip.flip('toggle');
console.log('flipped');
}, 2000);
}html {
background-color: #CCC; /* just for demo purpose */
}
div#FlipWrapper {
z-index: 999 !important;
top: 38%;
pointer-events: none;
transform: translateX(-3%) skew(16deg);
position: relative;
}
div#FlipWrapper div.Wrapper {
display: block;
width: 175px !important;
height: 175px !important;
}
div#FlipWrapper div.ShopLogo {
width: inherit !important;
height: inherit !important;
background-color: #241f20;
border: 10px solid #ffffff;
border-radius: 50%;
position: absolute !important;
z-index: 99;
top: 32%;
left: 0;
overflow: hidden;
border-radius: 50%;
}
div#FlipWrapper div.ShopLogo div.Inner {
width: 100%;
height: 100%;
padding: 35px;
}
div#FlipWrapper div.ShopLogo div.Inner>img {
width: 100%;
transform: scale(1.1) rotate(-8deg);
}
div#FlipWrapper div.ShopLogo div.Inner p {
color: #ffffff;
transform: rotate(-12deg);
line-height: 43px;
text-align: center;
display: inline;
font-size: 52px;
font-family: "AmaticBold", sans-serif;
margin-left: 10px;
margin-top: 40px;
}
div#FlipWrapper div.ShopLogo div.Inner p span {
display: block;
font-size: 42px;
}<script src="https://code.jquery.com/jquery-3.3.1.js" integrity="sha256-2Kok7MbOyxpgUVvAk/HJ2jigOSYS2auK4Pfzbm7uH60=" crossorigin="anonymous"></script>
<div id="FlipWrapper">
<div class="ShopLogo front">
<div class="Wrapper">
<div id="FlipCoinFront" class="Inner valign-wrapper">
<p>shop <span class="In"> - in - </span>shop</p>
</div>
</div>
</div>
<div class="ShopLogo back">
<div class="Wrapper">
<div id="FlipCoinBack" class="Inner valign-wrapper"></div>
</div>
</div>
</div>answered Nov 16 '18 at 9:23
Rory McCrossanRory McCrossan
250k29217254
The issue is because the background of div#FlipWrapper div.ShopLogo is showing under the border of the child div#FlipWrapper div.Wrapper. To fix the problem, move the border and border-radius settings to div#FlipWrapper div.ShopLogo:
/*! flip - v1.1.2 - 2016-10-20
* https://github.com/nnattawat/flip
* Copyright (c) 2016 Nattawat Nonsung; Licensed MIT */
(function($) {
/*
* Private attributes and method
*/
// Function from David Walsh: http://davidwalsh.name/css-animation-callback licensed with http://opensource.org/licenses/MIT
var whichTransitionEvent = function() {
var t, el = document.createElement("fakeelement"),
transitions = {
"transition": "transitionend",
"OTransition": "oTransitionEnd",
"MozTransition": "transitionend",
"WebkitTransition": "webkitTransitionEnd"
};
for (t in transitions) {
if (el.style[t] !== undefined) {
return transitions[t];
}
}
};
/*
* Model declaration
*/
var Flip = function($el, options, callback) {
// Define default setting
this.setting = {
axis: "y",
reverse: false,
trigger: "click",
speed: 500,
forceHeight: false,
forceWidth: false,
autoSize: true,
front: '.front',
back: '.back'
};
this.setting = $.extend(this.setting, options);
if (typeof options.axis === 'string' && (options.axis.toLowerCase() === 'x' || options.axis.toLowerCase() === 'y')) {
this.setting.axis = options.axis.toLowerCase();
}
if (typeof options.reverse === "boolean") {
this.setting.reverse = options.reverse;
}
if (typeof options.trigger === 'string') {
this.setting.trigger = options.trigger.toLowerCase();
}
var speed = parseInt(options.speed);
if (!isNaN(speed)) {
this.setting.speed = speed;
}
if (typeof options.forceHeight === "boolean") {
this.setting.forceHeight = options.forceHeight;
}
if (typeof options.forceWidth === "boolean") {
this.setting.forceWidth = options.forceWidth;
}
if (typeof options.autoSize === "boolean") {
this.setting.autoSize = options.autoSize;
}
if (typeof options.front === 'string' || options.front instanceof $) {
this.setting.front = options.front;
}
if (typeof options.back === 'string' || options.back instanceof $) {
this.setting.back = options.back;
}
// Other attributes
this.element = $el;
this.frontElement = this.getFrontElement();
this.backElement = this.getBackElement();
this.isFlipped = false;
this.init(callback);
};
/*
* Public methods
*/
$.extend(Flip.prototype, {
flipDone: function(callback) {
var self = this;
// Providing a nicely wrapped up callback because transform is essentially async
self.element.one(whichTransitionEvent(), function() {
self.element.trigger('flip:done');
if (typeof callback === 'function') {
callback.call(self.element);
}
});
},
flip: function(callback) {
if (this.isFlipped) {
return;
}
this.isFlipped = true;
var rotateAxis = "rotate" + this.setting.axis;
this.frontElement.css({
transform: rotateAxis + (this.setting.reverse ? "(-180deg)" : "(180deg)"),
"z-index": "0"
});
this.backElement.css({
transform: rotateAxis + "(0deg)",
"z-index": "1"
});
this.flipDone(callback);
},
unflip: function(callback) {
if (!this.isFlipped) {
return;
}
this.isFlipped = false;
var rotateAxis = "rotate" + this.setting.axis;
this.frontElement.css({
transform: rotateAxis + "(0deg)",
"z-index": "1"
});
this.backElement.css({
transform: rotateAxis + (this.setting.reverse ? "(180deg)" : "(-180deg)"),
"z-index": "0"
});
this.flipDone(callback);
},
getFrontElement: function() {
if (this.setting.front instanceof $) {
return this.setting.front;
} else {
return this.element.find(this.setting.front);
}
},
getBackElement: function() {
if (this.setting.back instanceof $) {
return this.setting.back;
} else {
return this.element.find(this.setting.back);
}
},
init: function(callback) {
var self = this;
var faces = self.frontElement.add(self.backElement);
var rotateAxis = "rotate" + self.setting.axis;
var perspective = self.element["outer" + (rotateAxis === "rotatex" ? "Height" : "Width")]() * 2;
var elementCss = {
'perspective': perspective,
'position': 'relative'
};
var backElementCss = {
"transform": rotateAxis + "(" + (self.setting.reverse ? "180deg" : "-180deg") + ")",
"z-index": "0",
"position": "relative"
};
var faceElementCss = {
"backface-visibility": "hidden",
"transform-style": "preserve-3d",
"position": "absolute",
"z-index": "1"
};
if (self.setting.forceHeight) {
faces.outerHeight(self.element.height());
} else if (self.setting.autoSize) {
faceElementCss.height = '100%';
}
if (self.setting.forceWidth) {
faces.outerWidth(self.element.width());
} else if (self.setting.autoSize) {
faceElementCss.width = '100%';
}
// Back face always visible on Chrome #39
if ((window.chrome || (window.Intl && Intl.v8BreakIterator)) && 'CSS' in window) {
//Blink Engine, add preserve-3d to self.element
elementCss["-webkit-transform-style"] = "preserve-3d";
}
faces.css(faceElementCss).find('*').css({
"backface-visibility": "hidden"
});
self.element.css(elementCss);
self.backElement.css(backElementCss);
// #39
// not forcing width/height may cause an initial flip to show up on
// page load when we apply the style to reverse the backface...
// To prevent self we first apply the basic styles and then give the
// browser a moment to apply them. Only afterwards do we add the transition.
setTimeout(function() {
// By now the browser should have applied the styles, so the transition
// will only affect subsequent flips.
var speedInSec = self.setting.speed / 1000 || 0.5;
faces.css({
"transition": "all " + speedInSec + "s ease-out"
});
// This allows flip to be called for setup with only a callback (default settings)
if (typeof callback === 'function') {
callback.call(self.element);
}
// While this used to work with a setTimeout of zero, at some point that became
// unstable and the initial flip returned. The reason for this is unknown but we
// will temporarily use a short delay of 20 to mitigate this issue.
}, 20);
self.attachEvents();
},
clickHandler: function(event) {
if (!event) {
event = window.event;
}
if (this.element.find($(event.target).closest('button, a, input[type="submit"]')).length) {
return;
}
if (this.isFlipped) {
this.unflip();
} else {
this.flip();
}
},
hoverHandler: function() {
var self = this;
self.element.off('mouseleave.flip');
self.flip();
setTimeout(function() {
self.element.on('mouseleave.flip', $.proxy(self.unflip, self));
if (!self.element.is(":hover")) {
self.unflip();
}
}, (self.setting.speed + 150));
},
attachEvents: function() {
var self = this;
if (self.setting.trigger === "click") {
self.element.on($.fn.tap ? "tap.flip" : "click.flip", $.proxy(self.clickHandler, self));
} else if (self.setting.trigger === "hover") {
self.element.on('mouseenter.flip', $.proxy(self.hoverHandler, self));
self.element.on('mouseleave.flip', $.proxy(self.unflip, self));
}
},
flipChanged: function(callback) {
this.element.trigger('flip:change');
if (typeof callback === 'function') {
callback.call(this.element);
}
},
changeSettings: function(options, callback) {
var self = this;
var changeNeeded = false;
if (options.axis !== undefined && self.setting.axis !== options.axis.toLowerCase()) {
self.setting.axis = options.axis.toLowerCase();
changeNeeded = true;
}
if (options.reverse !== undefined && self.setting.reverse !== options.reverse) {
self.setting.reverse = options.reverse;
changeNeeded = true;
}
if (changeNeeded) {
var faces = self.frontElement.add(self.backElement);
var savedTrans = faces.css(["transition-property", "transition-timing-function", "transition-duration", "transition-delay"]);
faces.css({
transition: "none"
});
// This sets up the first flip in the new direction automatically
var rotateAxis = "rotate" + self.setting.axis;
if (self.isFlipped) {
self.frontElement.css({
transform: rotateAxis + (self.setting.reverse ? "(-180deg)" : "(180deg)"),
"z-index": "0"
});
} else {
self.backElement.css({
transform: rotateAxis + (self.setting.reverse ? "(180deg)" : "(-180deg)"),
"z-index": "0"
});
}
// Providing a nicely wrapped up callback because transform is essentially async
setTimeout(function() {
faces.css(savedTrans);
self.flipChanged(callback);
}, 0);
} else {
// If we didnt have to set the axis we can just call back.
self.flipChanged(callback);
}
}
});
/*
* jQuery collection methods
*/
$.fn.flip = function(options, callback) {
if (typeof options === 'function') {
callback = options;
}
if (typeof options === "string" || typeof options === "boolean") {
this.each(function() {
var flip = $(this).data('flip-model');
if (options === "toggle") {
options = !flip.isFlipped;
}
if (options) {
flip.flip(callback);
} else {
flip.unflip(callback);
}
});
} else {
this.each(function() {
if ($(this).data('flip-model')) { // The element has been initiated, all we have to do is change applicable settings
var flip = $(this).data('flip-model');
if (options && (options.axis !== undefined || options.reverse !== undefined)) {
flip.changeSettings(options, callback);
}
} else { // Init
$(this).data('flip-model', new Flip($(this), (options || {}), callback));
}
});
}
return this;
};
}(jQuery));
InitializeHeaderSlider();
// Trigger slide every 2 seconds
function InitializeHeaderSlider() {
var oInterval = setInterval(function() {
// Initialize flipper
var oFlip = $('#FlipWrapper').flip();
// Trigger flip toggle
oFlip.flip('toggle');
console.log('flipped');
}, 2000);
}html {
background-color: #CCC; /* just for demo purpose */
}
div#FlipWrapper {
z-index: 999 !important;
top: 38%;
pointer-events: none;
transform: translateX(-3%) skew(16deg);
position: relative;
}
div#FlipWrapper div.Wrapper {
display: block;
width: 175px !important;
height: 175px !important;
}
div#FlipWrapper div.ShopLogo {
width: inherit !important;
height: inherit !important;
background-color: #241f20;
border: 10px solid #ffffff;
border-radius: 50%;
position: absolute !important;
z-index: 99;
top: 32%;
left: 0;
overflow: hidden;
border-radius: 50%;
}
div#FlipWrapper div.ShopLogo div.Inner {
width: 100%;
height: 100%;
padding: 35px;
}
div#FlipWrapper div.ShopLogo div.Inner>img {
width: 100%;
transform: scale(1.1) rotate(-8deg);
}
div#FlipWrapper div.ShopLogo div.Inner p {
color: #ffffff;
transform: rotate(-12deg);
line-height: 43px;
text-align: center;
display: inline;
font-size: 52px;
font-family: "AmaticBold", sans-serif;
margin-left: 10px;
margin-top: 40px;
}
div#FlipWrapper div.ShopLogo div.Inner p span {
display: block;
font-size: 42px;
}<script src="https://code.jquery.com/jquery-3.3.1.js" integrity="sha256-2Kok7MbOyxpgUVvAk/HJ2jigOSYS2auK4Pfzbm7uH60=" crossorigin="anonymous"></script>
<div id="FlipWrapper">
<div class="ShopLogo front">
<div class="Wrapper">
<div id="FlipCoinFront" class="Inner valign-wrapper">
<p>shop <span class="In"> - in - </span>shop</p>
</div>
</div>
</div>
<div class="ShopLogo back">
<div class="Wrapper">
<div id="FlipCoinBack" class="Inner valign-wrapper"></div>
</div>
</div>
</div>/*! flip - v1.1.2 - 2016-10-20
* https://github.com/nnattawat/flip
* Copyright (c) 2016 Nattawat Nonsung; Licensed MIT */
(function($) {
/*
* Private attributes and method
*/
// Function from David Walsh: http://davidwalsh.name/css-animation-callback licensed with http://opensource.org/licenses/MIT
var whichTransitionEvent = function() {
var t, el = document.createElement("fakeelement"),
transitions = {
"transition": "transitionend",
"OTransition": "oTransitionEnd",
"MozTransition": "transitionend",
"WebkitTransition": "webkitTransitionEnd"
};
for (t in transitions) {
if (el.style[t] !== undefined) {
return transitions[t];
}
}
};
/*
* Model declaration
*/
var Flip = function($el, options, callback) {
// Define default setting
this.setting = {
axis: "y",
reverse: false,
trigger: "click",
speed: 500,
forceHeight: false,
forceWidth: false,
autoSize: true,
front: '.front',
back: '.back'
};
this.setting = $.extend(this.setting, options);
if (typeof options.axis === 'string' && (options.axis.toLowerCase() === 'x' || options.axis.toLowerCase() === 'y')) {
this.setting.axis = options.axis.toLowerCase();
}
if (typeof options.reverse === "boolean") {
this.setting.reverse = options.reverse;
}
if (typeof options.trigger === 'string') {
this.setting.trigger = options.trigger.toLowerCase();
}
var speed = parseInt(options.speed);
if (!isNaN(speed)) {
this.setting.speed = speed;
}
if (typeof options.forceHeight === "boolean") {
this.setting.forceHeight = options.forceHeight;
}
if (typeof options.forceWidth === "boolean") {
this.setting.forceWidth = options.forceWidth;
}
if (typeof options.autoSize === "boolean") {
this.setting.autoSize = options.autoSize;
}
if (typeof options.front === 'string' || options.front instanceof $) {
this.setting.front = options.front;
}
if (typeof options.back === 'string' || options.back instanceof $) {
this.setting.back = options.back;
}
// Other attributes
this.element = $el;
this.frontElement = this.getFrontElement();
this.backElement = this.getBackElement();
this.isFlipped = false;
this.init(callback);
};
/*
* Public methods
*/
$.extend(Flip.prototype, {
flipDone: function(callback) {
var self = this;
// Providing a nicely wrapped up callback because transform is essentially async
self.element.one(whichTransitionEvent(), function() {
self.element.trigger('flip:done');
if (typeof callback === 'function') {
callback.call(self.element);
}
});
},
flip: function(callback) {
if (this.isFlipped) {
return;
}
this.isFlipped = true;
var rotateAxis = "rotate" + this.setting.axis;
this.frontElement.css({
transform: rotateAxis + (this.setting.reverse ? "(-180deg)" : "(180deg)"),
"z-index": "0"
});
this.backElement.css({
transform: rotateAxis + "(0deg)",
"z-index": "1"
});
this.flipDone(callback);
},
unflip: function(callback) {
if (!this.isFlipped) {
return;
}
this.isFlipped = false;
var rotateAxis = "rotate" + this.setting.axis;
this.frontElement.css({
transform: rotateAxis + "(0deg)",
"z-index": "1"
});
this.backElement.css({
transform: rotateAxis + (this.setting.reverse ? "(180deg)" : "(-180deg)"),
"z-index": "0"
});
this.flipDone(callback);
},
getFrontElement: function() {
if (this.setting.front instanceof $) {
return this.setting.front;
} else {
return this.element.find(this.setting.front);
}
},
getBackElement: function() {
if (this.setting.back instanceof $) {
return this.setting.back;
} else {
return this.element.find(this.setting.back);
}
},
init: function(callback) {
var self = this;
var faces = self.frontElement.add(self.backElement);
var rotateAxis = "rotate" + self.setting.axis;
var perspective = self.element["outer" + (rotateAxis === "rotatex" ? "Height" : "Width")]() * 2;
var elementCss = {
'perspective': perspective,
'position': 'relative'
};
var backElementCss = {
"transform": rotateAxis + "(" + (self.setting.reverse ? "180deg" : "-180deg") + ")",
"z-index": "0",
"position": "relative"
};
var faceElementCss = {
"backface-visibility": "hidden",
"transform-style": "preserve-3d",
"position": "absolute",
"z-index": "1"
};
if (self.setting.forceHeight) {
faces.outerHeight(self.element.height());
} else if (self.setting.autoSize) {
faceElementCss.height = '100%';
}
if (self.setting.forceWidth) {
faces.outerWidth(self.element.width());
} else if (self.setting.autoSize) {
faceElementCss.width = '100%';
}
// Back face always visible on Chrome #39
if ((window.chrome || (window.Intl && Intl.v8BreakIterator)) && 'CSS' in window) {
//Blink Engine, add preserve-3d to self.element
elementCss["-webkit-transform-style"] = "preserve-3d";
}
faces.css(faceElementCss).find('*').css({
"backface-visibility": "hidden"
});
self.element.css(elementCss);
self.backElement.css(backElementCss);
// #39
// not forcing width/height may cause an initial flip to show up on
// page load when we apply the style to reverse the backface...
// To prevent self we first apply the basic styles and then give the
// browser a moment to apply them. Only afterwards do we add the transition.
setTimeout(function() {
// By now the browser should have applied the styles, so the transition
// will only affect subsequent flips.
var speedInSec = self.setting.speed / 1000 || 0.5;
faces.css({
"transition": "all " + speedInSec + "s ease-out"
});
// This allows flip to be called for setup with only a callback (default settings)
if (typeof callback === 'function') {
callback.call(self.element);
}
// While this used to work with a setTimeout of zero, at some point that became
// unstable and the initial flip returned. The reason for this is unknown but we
// will temporarily use a short delay of 20 to mitigate this issue.
}, 20);
self.attachEvents();
},
clickHandler: function(event) {
if (!event) {
event = window.event;
}
if (this.element.find($(event.target).closest('button, a, input[type="submit"]')).length) {
return;
}
if (this.isFlipped) {
this.unflip();
} else {
this.flip();
}
},
hoverHandler: function() {
var self = this;
self.element.off('mouseleave.flip');
self.flip();
setTimeout(function() {
self.element.on('mouseleave.flip', $.proxy(self.unflip, self));
if (!self.element.is(":hover")) {
self.unflip();
}
}, (self.setting.speed + 150));
},
attachEvents: function() {
var self = this;
if (self.setting.trigger === "click") {
self.element.on($.fn.tap ? "tap.flip" : "click.flip", $.proxy(self.clickHandler, self));
} else if (self.setting.trigger === "hover") {
self.element.on('mouseenter.flip', $.proxy(self.hoverHandler, self));
self.element.on('mouseleave.flip', $.proxy(self.unflip, self));
}
},
flipChanged: function(callback) {
this.element.trigger('flip:change');
if (typeof callback === 'function') {
callback.call(this.element);
}
},
changeSettings: function(options, callback) {
var self = this;
var changeNeeded = false;
if (options.axis !== undefined && self.setting.axis !== options.axis.toLowerCase()) {
self.setting.axis = options.axis.toLowerCase();
changeNeeded = true;
}
if (options.reverse !== undefined && self.setting.reverse !== options.reverse) {
self.setting.reverse = options.reverse;
changeNeeded = true;
}
if (changeNeeded) {
var faces = self.frontElement.add(self.backElement);
var savedTrans = faces.css(["transition-property", "transition-timing-function", "transition-duration", "transition-delay"]);
faces.css({
transition: "none"
});
// This sets up the first flip in the new direction automatically
var rotateAxis = "rotate" + self.setting.axis;
if (self.isFlipped) {
self.frontElement.css({
transform: rotateAxis + (self.setting.reverse ? "(-180deg)" : "(180deg)"),
"z-index": "0"
});
} else {
self.backElement.css({
transform: rotateAxis + (self.setting.reverse ? "(180deg)" : "(-180deg)"),
"z-index": "0"
});
}
// Providing a nicely wrapped up callback because transform is essentially async
setTimeout(function() {
faces.css(savedTrans);
self.flipChanged(callback);
}, 0);
} else {
// If we didnt have to set the axis we can just call back.
self.flipChanged(callback);
}
}
});
/*
* jQuery collection methods
*/
$.fn.flip = function(options, callback) {
if (typeof options === 'function') {
callback = options;
}
if (typeof options === "string" || typeof options === "boolean") {
this.each(function() {
var flip = $(this).data('flip-model');
if (options === "toggle") {
options = !flip.isFlipped;
}
if (options) {
flip.flip(callback);
} else {
flip.unflip(callback);
}
});
} else {
this.each(function() {
if ($(this).data('flip-model')) { // The element has been initiated, all we have to do is change applicable settings
var flip = $(this).data('flip-model');
if (options && (options.axis !== undefined || options.reverse !== undefined)) {
flip.changeSettings(options, callback);
}
} else { // Init
$(this).data('flip-model', new Flip($(this), (options || {}), callback));
}
});
}
return this;
};
}(jQuery));
InitializeHeaderSlider();
// Trigger slide every 2 seconds
function InitializeHeaderSlider() {
var oInterval = setInterval(function() {
// Initialize flipper
var oFlip = $('#FlipWrapper').flip();
// Trigger flip toggle
oFlip.flip('toggle');
console.log('flipped');
}, 2000);
}html {
background-color: #CCC; /* just for demo purpose */
}
div#FlipWrapper {
z-index: 999 !important;
top: 38%;
pointer-events: none;
transform: translateX(-3%) skew(16deg);
position: relative;
}
div#FlipWrapper div.Wrapper {
display: block;
width: 175px !important;
height: 175px !important;
}
div#FlipWrapper div.ShopLogo {
width: inherit !important;
height: inherit !important;
background-color: #241f20;
border: 10px solid #ffffff;
border-radius: 50%;
position: absolute !important;
z-index: 99;
top: 32%;
left: 0;
overflow: hidden;
border-radius: 50%;
}
div#FlipWrapper div.ShopLogo div.Inner {
width: 100%;
height: 100%;
padding: 35px;
}
div#FlipWrapper div.ShopLogo div.Inner>img {
width: 100%;
transform: scale(1.1) rotate(-8deg);
}
div#FlipWrapper div.ShopLogo div.Inner p {
color: #ffffff;
transform: rotate(-12deg);
line-height: 43px;
text-align: center;
display: inline;
font-size: 52px;
font-family: "AmaticBold", sans-serif;
margin-left: 10px;
margin-top: 40px;
}
div#FlipWrapper div.ShopLogo div.Inner p span {
display: block;
font-size: 42px;
}<script src="https://code.jquery.com/jquery-3.3.1.js" integrity="sha256-2Kok7MbOyxpgUVvAk/HJ2jigOSYS2auK4Pfzbm7uH60=" crossorigin="anonymous"></script>
<div id="FlipWrapper">
<div class="ShopLogo front">
<div class="Wrapper">
<div id="FlipCoinFront" class="Inner valign-wrapper">
<p>shop <span class="In"> - in - </span>shop</p>
</div>
</div>
</div>
<div class="ShopLogo back">
<div class="Wrapper">
<div id="FlipCoinBack" class="Inner valign-wrapper"></div>
</div>
</div>
</div>/*! flip - v1.1.2 - 2016-10-20
* https://github.com/nnattawat/flip
* Copyright (c) 2016 Nattawat Nonsung; Licensed MIT */
(function($) {
/*
* Private attributes and method
*/
// Function from David Walsh: http://davidwalsh.name/css-animation-callback licensed with http://opensource.org/licenses/MIT
var whichTransitionEvent = function() {
var t, el = document.createElement("fakeelement"),
transitions = {
"transition": "transitionend",
"OTransition": "oTransitionEnd",
"MozTransition": "transitionend",
"WebkitTransition": "webkitTransitionEnd"
};
for (t in transitions) {
if (el.style[t] !== undefined) {
return transitions[t];
}
}
};
/*
* Model declaration
*/
var Flip = function($el, options, callback) {
// Define default setting
this.setting = {
axis: "y",
reverse: false,
trigger: "click",
speed: 500,
forceHeight: false,
forceWidth: false,
autoSize: true,
front: '.front',
back: '.back'
};
this.setting = $.extend(this.setting, options);
if (typeof options.axis === 'string' && (options.axis.toLowerCase() === 'x' || options.axis.toLowerCase() === 'y')) {
this.setting.axis = options.axis.toLowerCase();
}
if (typeof options.reverse === "boolean") {
this.setting.reverse = options.reverse;
}
if (typeof options.trigger === 'string') {
this.setting.trigger = options.trigger.toLowerCase();
}
var speed = parseInt(options.speed);
if (!isNaN(speed)) {
this.setting.speed = speed;
}
if (typeof options.forceHeight === "boolean") {
this.setting.forceHeight = options.forceHeight;
}
if (typeof options.forceWidth === "boolean") {
this.setting.forceWidth = options.forceWidth;
}
if (typeof options.autoSize === "boolean") {
this.setting.autoSize = options.autoSize;
}
if (typeof options.front === 'string' || options.front instanceof $) {
this.setting.front = options.front;
}
if (typeof options.back === 'string' || options.back instanceof $) {
this.setting.back = options.back;
}
// Other attributes
this.element = $el;
this.frontElement = this.getFrontElement();
this.backElement = this.getBackElement();
this.isFlipped = false;
this.init(callback);
};
/*
* Public methods
*/
$.extend(Flip.prototype, {
flipDone: function(callback) {
var self = this;
// Providing a nicely wrapped up callback because transform is essentially async
self.element.one(whichTransitionEvent(), function() {
self.element.trigger('flip:done');
if (typeof callback === 'function') {
callback.call(self.element);
}
});
},
flip: function(callback) {
if (this.isFlipped) {
return;
}
this.isFlipped = true;
var rotateAxis = "rotate" + this.setting.axis;
this.frontElement.css({
transform: rotateAxis + (this.setting.reverse ? "(-180deg)" : "(180deg)"),
"z-index": "0"
});
this.backElement.css({
transform: rotateAxis + "(0deg)",
"z-index": "1"
});
this.flipDone(callback);
},
unflip: function(callback) {
if (!this.isFlipped) {
return;
}
this.isFlipped = false;
var rotateAxis = "rotate" + this.setting.axis;
this.frontElement.css({
transform: rotateAxis + "(0deg)",
"z-index": "1"
});
this.backElement.css({
transform: rotateAxis + (this.setting.reverse ? "(180deg)" : "(-180deg)"),
"z-index": "0"
});
this.flipDone(callback);
},
getFrontElement: function() {
if (this.setting.front instanceof $) {
return this.setting.front;
} else {
return this.element.find(this.setting.front);
}
},
getBackElement: function() {
if (this.setting.back instanceof $) {
return this.setting.back;
} else {
return this.element.find(this.setting.back);
}
},
init: function(callback) {
var self = this;
var faces = self.frontElement.add(self.backElement);
var rotateAxis = "rotate" + self.setting.axis;
var perspective = self.element["outer" + (rotateAxis === "rotatex" ? "Height" : "Width")]() * 2;
var elementCss = {
'perspective': perspective,
'position': 'relative'
};
var backElementCss = {
"transform": rotateAxis + "(" + (self.setting.reverse ? "180deg" : "-180deg") + ")",
"z-index": "0",
"position": "relative"
};
var faceElementCss = {
"backface-visibility": "hidden",
"transform-style": "preserve-3d",
"position": "absolute",
"z-index": "1"
};
if (self.setting.forceHeight) {
faces.outerHeight(self.element.height());
} else if (self.setting.autoSize) {
faceElementCss.height = '100%';
}
if (self.setting.forceWidth) {
faces.outerWidth(self.element.width());
} else if (self.setting.autoSize) {
faceElementCss.width = '100%';
}
// Back face always visible on Chrome #39
if ((window.chrome || (window.Intl && Intl.v8BreakIterator)) && 'CSS' in window) {
//Blink Engine, add preserve-3d to self.element
elementCss["-webkit-transform-style"] = "preserve-3d";
}
faces.css(faceElementCss).find('*').css({
"backface-visibility": "hidden"
});
self.element.css(elementCss);
self.backElement.css(backElementCss);
// #39
// not forcing width/height may cause an initial flip to show up on
// page load when we apply the style to reverse the backface...
// To prevent self we first apply the basic styles and then give the
// browser a moment to apply them. Only afterwards do we add the transition.
setTimeout(function() {
// By now the browser should have applied the styles, so the transition
// will only affect subsequent flips.
var speedInSec = self.setting.speed / 1000 || 0.5;
faces.css({
"transition": "all " + speedInSec + "s ease-out"
});
// This allows flip to be called for setup with only a callback (default settings)
if (typeof callback === 'function') {
callback.call(self.element);
}
// While this used to work with a setTimeout of zero, at some point that became
// unstable and the initial flip returned. The reason for this is unknown but we
// will temporarily use a short delay of 20 to mitigate this issue.
}, 20);
self.attachEvents();
},
clickHandler: function(event) {
if (!event) {
event = window.event;
}
if (this.element.find($(event.target).closest('button, a, input[type="submit"]')).length) {
return;
}
if (this.isFlipped) {
this.unflip();
} else {
this.flip();
}
},
hoverHandler: function() {
var self = this;
self.element.off('mouseleave.flip');
self.flip();
setTimeout(function() {
self.element.on('mouseleave.flip', $.proxy(self.unflip, self));
if (!self.element.is(":hover")) {
self.unflip();
}
}, (self.setting.speed + 150));
},
attachEvents: function() {
var self = this;
if (self.setting.trigger === "click") {
self.element.on($.fn.tap ? "tap.flip" : "click.flip", $.proxy(self.clickHandler, self));
} else if (self.setting.trigger === "hover") {
self.element.on('mouseenter.flip', $.proxy(self.hoverHandler, self));
self.element.on('mouseleave.flip', $.proxy(self.unflip, self));
}
},
flipChanged: function(callback) {
this.element.trigger('flip:change');
if (typeof callback === 'function') {
callback.call(this.element);
}
},
changeSettings: function(options, callback) {
var self = this;
var changeNeeded = false;
if (options.axis !== undefined && self.setting.axis !== options.axis.toLowerCase()) {
self.setting.axis = options.axis.toLowerCase();
changeNeeded = true;
}
if (options.reverse !== undefined && self.setting.reverse !== options.reverse) {
self.setting.reverse = options.reverse;
changeNeeded = true;
}
if (changeNeeded) {
var faces = self.frontElement.add(self.backElement);
var savedTrans = faces.css(["transition-property", "transition-timing-function", "transition-duration", "transition-delay"]);
faces.css({
transition: "none"
});
// This sets up the first flip in the new direction automatically
var rotateAxis = "rotate" + self.setting.axis;
if (self.isFlipped) {
self.frontElement.css({
transform: rotateAxis + (self.setting.reverse ? "(-180deg)" : "(180deg)"),
"z-index": "0"
});
} else {
self.backElement.css({
transform: rotateAxis + (self.setting.reverse ? "(180deg)" : "(-180deg)"),
"z-index": "0"
});
}
// Providing a nicely wrapped up callback because transform is essentially async
setTimeout(function() {
faces.css(savedTrans);
self.flipChanged(callback);
}, 0);
} else {
// If we didnt have to set the axis we can just call back.
self.flipChanged(callback);
}
}
});
/*
* jQuery collection methods
*/
$.fn.flip = function(options, callback) {
if (typeof options === 'function') {
callback = options;
}
if (typeof options === "string" || typeof options === "boolean") {
this.each(function() {
var flip = $(this).data('flip-model');
if (options === "toggle") {
options = !flip.isFlipped;
}
if (options) {
flip.flip(callback);
} else {
flip.unflip(callback);
}
});
} else {
this.each(function() {
if ($(this).data('flip-model')) { // The element has been initiated, all we have to do is change applicable settings
var flip = $(this).data('flip-model');
if (options && (options.axis !== undefined || options.reverse !== undefined)) {
flip.changeSettings(options, callback);
}
} else { // Init
$(this).data('flip-model', new Flip($(this), (options || {}), callback));
}
});
}
return this;
};
}(jQuery));
InitializeHeaderSlider();
// Trigger slide every 2 seconds
function InitializeHeaderSlider() {
var oInterval = setInterval(function() {
// Initialize flipper
var oFlip = $('#FlipWrapper').flip();
// Trigger flip toggle
oFlip.flip('toggle');
console.log('flipped');
}, 2000);
}html {
background-color: #CCC; /* just for demo purpose */
}
div#FlipWrapper {
z-index: 999 !important;
top: 38%;
pointer-events: none;
transform: translateX(-3%) skew(16deg);
position: relative;
}
div#FlipWrapper div.Wrapper {
display: block;
width: 175px !important;
height: 175px !important;
}
div#FlipWrapper div.ShopLogo {
width: inherit !important;
height: inherit !important;
background-color: #241f20;
border: 10px solid #ffffff;
border-radius: 50%;
position: absolute !important;
z-index: 99;
top: 32%;
left: 0;
overflow: hidden;
border-radius: 50%;
}
div#FlipWrapper div.ShopLogo div.Inner {
width: 100%;
height: 100%;
padding: 35px;
}
div#FlipWrapper div.ShopLogo div.Inner>img {
width: 100%;
transform: scale(1.1) rotate(-8deg);
}
div#FlipWrapper div.ShopLogo div.Inner p {
color: #ffffff;
transform: rotate(-12deg);
line-height: 43px;
text-align: center;
display: inline;
font-size: 52px;
font-family: "AmaticBold", sans-serif;
margin-left: 10px;
margin-top: 40px;
}
div#FlipWrapper div.ShopLogo div.Inner p span {
display: block;
font-size: 42px;
}<script src="https://code.jquery.com/jquery-3.3.1.js" integrity="sha256-2Kok7MbOyxpgUVvAk/HJ2jigOSYS2auK4Pfzbm7uH60=" crossorigin="anonymous"></script>
<div id="FlipWrapper">
<div class="ShopLogo front">
<div class="Wrapper">
<div id="FlipCoinFront" class="Inner valign-wrapper">
<p>shop <span class="In"> - in - </span>shop</p>
</div>
</div>
</div>
<div class="ShopLogo back">
<div class="Wrapper">
<div id="FlipCoinBack" class="Inner valign-wrapper"></div>
</div>
</div>
</div>answered Nov 16 '18 at 9:23
Rory McCrossanRory McCrossan
250k29217254
answered Nov 16 '18 at 9:23
Rory McCrossanRory McCrossan
250k29217254
answered Nov 16 '18 at 9:23
Rory McCrossanRory McCrossan
250k29217254
answered Nov 16 '18 at 9:23
Rory McCrossanRory McCrossan
250k29217254
250k29217254
Thanks for the answer! I didn't know borders where affected by their parents if the width and height is the same! (I'm aware I should have tested that before posting hehe). Only thing left to do is some basic repositioning and we're good to go!
– S. ter Keurs
Nov 16 '18 at 9:40
add a comment |
Thanks for the answer! I didn't know borders where affected by their parents if the width and height is the same! (I'm aware I should have tested that before posting hehe). Only thing left to do is some basic repositioning and we're good to go!
– S. ter Keurs
Nov 16 '18 at 9:40
Thanks for the answer! I didn't know borders where affected by their parents if the width and height is the same! (I'm aware I should have tested that before posting hehe). Only thing left to do is some basic repositioning and we're good to go!
– S. ter Keurs
Nov 16 '18 at 9:40
Thanks for the answer! I didn't know borders where affected by their parents if the width and height is the same! (I'm aware I should have tested that before posting hehe). Only thing left to do is some basic repositioning and we're good to go!
– S. ter Keurs
Nov 16 '18 at 9:40
add a comment |
draft saved
draft discarded
Thanks for contributing an answer to Stack Overflow!
- Please be sure to answer the question. Provide details and share your research!
But avoid …
- Asking for help, clarification, or responding to other answers.
- Making statements based on opinion; back them up with references or personal experience.
To learn more, see our tips on writing great answers.
draft saved
draft discarded
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
StackExchange.ready(
function () {
StackExchange.openid.initPostLogin('.new-post-login', 'https%3a%2f%2fstackoverflow.com%2fquestions%2f53334708%2fborder-on-circle-creates-1px-of-black-outline%23new-answer', 'question_page');
}
);
Post as a guest
Required, but never shown
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
