chrome leaves extra space after transformation.
to reproduce issue:
switch on responsive mode (for example take iphone 5/SE)
because of element x position + element width is greater then viewport with the horizontal scrollbar will appear. its ok but the thing is when u click the button "update transformation" (it will just update/transforms the element x position) after that there is no need for extra space or horizontal scrollbar but seems chrome doesn't updates a viewport size. (in this example width is a same after transformation).
P.S. it works correctly in FF
<h2>test transform</h2>
<a href="/" class="hp-section-image-zebra">
<img src="https://uploads- ssl.webflow.com/5a7bafaa69f239000170771c/5a7e5dcdd2e04c0001f3fcdc_desktop.png" alt="Refurbished Apple Desktops">
</a>
<button onclick="updateTransformation()">update transformation</button>
<style>
body{
border: solid black;
}
.hp-section-image-zebra{
display: inline-block;
transform: translate(300px, 0px);
}
</style>
<script>
function updateTransformation() {
var el = document.querySelector('body > a');
el.style.transform="translateX(0px)";
}
</script>
codepen example
Use this css for all browsers:
.hp-section-image-zebra{
display: inline-block;
-webkit-transform: translate(300px, 0px);
-moz-transform: translate(300px, 0px);
-ms-transform: translate(300px, 0px);
-o-transform: translate(300px, 0px);
transform: translate(300px, 0px);
}
Related
I want to display a div in right side exactly what the following CSS does but using translate3d
div {
position: absolute;
right: 0;
top: 0;
}
I have tried the following but its working only in Chrome.
div {
-webkit-transform: translate3d(100vw,0,0);
-moz-transform: translate3d(100vw,0,0);
-o-transform: translate3d(100vw,0,0);
transform: translate3d(100vw,0,0);
}
UPDATE
Please check the fiddle. http://jsfiddle.net/7LLbu/
I need the same toggle function using translate3d.
Kindly help me fix this.
html, body {
margin: 0;
padding: 0;
}
.float-left3d {
-webkit-transform: translate3d(100vw,0,0) translateX(-100%);
-moz-transform: translate3d(100vw,0,0) translateX(-100%);
-o-transform: translate3d(100vw,0,0) translateX(-100%);
transform: translate3d(100vw,0,0) translateX(-100%);
}
div {
width: 250px;
height: 400px;
background: green;
}
<div class="float-left3d">
Fiddle: http://jsfiddle.net/VjgGY/1/
What we are doing is saying "First put it on the right of the viewport, and then because it sticks out by the width of the div do subtraction translateX by the width of the div"
This works fine;
.translate3d(~"calc(100vw - 276px)", 0, 0);
Where theres a will theres a way! Or more likely a hack using JS...
var container = document.getElementById('container');
var translatedChild = document.getElementById('child');
var rightEdge = container.offsetLeft + container.offsetWidth;
var translation = rightEdge - translatedChild.offsetWidth;
translatedChild.style.transform = "translate3d("+translation+",0,0);
Rinse & repeat for vender prefixed CSS. Should work with variable width container, you'll have to update it when the page resizes if your designing responsively though.
Is it possible to rotate (90-180-270 degrees), flip (horizontal/vertical) and resize (2x, 3x) icons easily in kendo-ui mobile?
You can do rotate easily with CSS transforms, something like this:
<style>
.km-home:after {
-webkit-transform: rotate(90deg);
transform: rotate(90deg);
}
</style>
You can flip an element with CSS transforms too:
<style>
.km-home:after {
-webkit-transform: scaleX(-1);
transform: scaleX(-1);
}
</style>
You can also use scale to resize it - scale(2), etc...
However this question has nothing to do with Kendo UI :)
Here is an example implementation of previous and next buttons using a custom kendo mobile icon based on Bundyo's insights:
<a data-role="button" class="prev" data-icon="custom"></a>
<a data-role="button" class="next" data-icon="custom"></a>
CSS:
.km-button.prev .km-icon.km-custom:before, .km-button.prev .km-icon.km-custom:after,
.km-button.next .km-icon.km-custom:before, .km-button.next .km-icon.km-custom:after { content: "\e217" }
.km-button.prev .km-icon.km-custom:before, .km-button.prev .km-icon.km-custom:after { -moz-transform: scaleX(-1); -ms-transform: scaleX(-1); -o-transform: scaleX(-1); -webkit-transform: scaleX(-1); transform: scaleX(-1); }
I'm trying to get an image (a plus symbol) to rotate 45 degrees to create a cross symbol. I have so far managed to achieve this using the code below but its working on hover, I wanted to have it rotate on click.
Is there a simple way of doing so using CSS?
My code is:
CSS
img {
display: block;
margin: 20px;
}
.crossRotate {
-webkit-transition-duration: 1s;
-moz-transition-duration: 1s;
-o-transition-duration: 1s;
transition-duration: 1s;
-webkit-transition-property: -webkit-transform;
-moz-transition-property: -moz-transform;
-o-transition-property: -o-transform;
transition-property: transform;
}
.crossRotate:hover {
-webkit-transform: rotate(45deg);
-ms-transform: rotate(45deg);
transform: rotate(45deg);
}
HTML
<body>
<img class="crossRotate" src="images/cross.png" alt="Cross Menu button" />
</body>
Here is the jsfiddle demo.
If you want a css only solution you can use active
.crossRotate:active {
transform: rotate(45deg);
-webkit-transform: rotate(45deg);
-ms-transform: rotate(45deg);
}
But the transformation will not persist when the activity moves. For that you need javascript (jquery click and css is the cleanest IMO).
$( ".crossRotate" ).click(function() {
if ( $( this ).css( "transform" ) == 'none' ){
$(this).css("transform","rotate(45deg)");
} else {
$(this).css("transform","" );
}
});
Fiddle
Method #1: CSS :focus pseudo-class
As pure CSS solution, you could achieve sort of the effect by using a tabindex attribute for the image, and :focus pseudo-class as follows:
<img class="crossRotate" src="http://placehold.it/100" tabindex="1" />
.crossRotate {
outline: 0;
/* other styles... */
}
.crossRotate:focus {
-webkit-transform: rotate(45deg);
-ms-transform: rotate(45deg);
transform: rotate(45deg);
}
WORKING DEMO.
Note: Using this approach, the image gets rotated onclick (focused), to negate the rotation, you'll need to click somewhere out of the image (blured).
Method #2: Hidden input & :checked pseudo-class
This is one of my favorite methods. In this approach, there's a hidden checkbox input and a <label> element which wraps the image.
Once you click on the image, the hidden input is checked because of using for attribute for the label.
Hence by using the :checked pseudo-class and adjacent sibling selector +, we could get the image to be rotated:
<input type="checkbox" id="hacky-input">
<label for="hacky-input">
<img class="crossRotate" src="http://placehold.it/100">
</label>
#hacky-input {
display: none; /* Hide the input */
}
#hacky-input:checked + label img.crossRotate {
-webkit-transform: rotate(45deg);
-ms-transform: rotate(45deg);
transform: rotate(45deg);
}
WORKING DEMO #1.
WORKING DEMO #2 (Applying the rotate to the label gives a better experience).
Method #3: Toggling a class via JavaScript
If using JavaScript/jQuery is an option, you could toggle a .active class by .toggleClass() to trigger the rotation effect, as follows:
$('.crossRotate').on('click', function(){
$(this).toggleClass('active');
});
.crossRotate.active {
/* vendor-prefixes here... */
transform: rotate(45deg);
}
WORKING DEMO.
Voila!
div {
background-color: red;
color: white;
font-weight: bold;
width: 48px;
height: 48px;
transform: rotate(360deg);
transition: transform 0.5s;
}
div:active {
transform: rotate(0deg);
transition: 0s;
}
<div></div>
You can also affect differente DOM elements using :target pseudo class.
If an element is the destination of an anchor target it will get the :target pseudo element.
<style>
p { color:black; }
p:target { color:red; }
</style>
Click me
<p id="elem">And I will change</p>
Here is a fiddle : https://jsfiddle.net/k86b81jv/
As jeremyjjbrow said, :active pseudo won't persist. But there's a hack for doing it on pure css. You can wrap it on a <a> tag, and apply the :active on it, like this:
<a class="test">
<img class="crossRotate" src="images/cross.png" alt="Cross Menu button" />
</a>
And the css:
.test:active .crossRotate {
transform: rotate(45deg);
-webkit-transform: rotate(45deg);
-ms-transform: rotate(45deg);
}
Try it out... It works (at least on Chrome)!
You can use WebkitTransform along with Transition (transition: all 2s;) to make the desired rotation with animation.
<style>
div.a {
width: 150px;
height: 80px;
background-color: yellow;
transition: all 2s;
}
</style>
<div class="a" id="box">Your Image Here</div>
<button onclick="rotate()">Rotate </button>
<script>
function rotate()
{
x= document.getElementById("box");
x.style.WebkitTransform = 'rotate(' + 20 +'deg)';
}
</script>
The advantage with this method is that you can do it programmatically. You can specify the angle using javascript (Although this is not required in your partcular case).
Refer this.
.c-btn:hover,.c-btn-active {
transform: rotate(45deg);
}
You can use JavaScript to do this, with onClick method.
This maybe helps CSS3 transition click event
I made a wedding invitation and there's a code at the bottom of the invitation to log into the wedding website. To make people aware of the code I created a little CSS3 3D animation: see the demo
HTML:
<section id="viewport">
<div id="invitation" class="show-front">
<figure class="front"></figure>
<figure class="ring"></figure>
</div>
</section>
CSS:
section#viewport {
-webkit-perspective: 1000;
-webkit-perspective-origin: 0% 0%;
}
div#invitation {
position: absolute;
-webkit-transform-style: preserve-3d;
-webkit-transition: -webkit-transform 1s ease;
}
#invitation .front {
-webkit-transform: rotateX(12deg) translate3d(0px, 0px, 32px);
#invitation .ring {
-webkit-transform: rotateY(-90deg) translate3d(6px, -15px, -1px);
}
#invitation.show-front {
-webkit-transform: rotateY(-24deg) rotateX(90deg);
}
#invitation:hover {
-webkit-transform: rotateY(20deg) rotateX(3deg);
}
In Chrome and Firefox looks everything well, but in Safari the intersecting elements produce an annoying flicker issue. If I remove the rings which are intersecting the front picture element the flicker issue don't appear: the demo without rings
I've tried everything and read every post I could find, but nothing solved this problem. All useless html elements in the demo aren't useless in my real animation.
I am using an embedded font for the top navigational elements on a site
Helvetica65 and at 16px it is the perfect WIDTH but I need it to be
about 90% of it's current height.
In Photoshop, the solution is simple - adjust the vertical scaling.
Is there a way to do essentially the same thing using CSS? And if so, how
well is it supported?
Here is a jsFiddle of the basic nav coding.
The transform property can be used to scale text.
It's for blocks, so you'll need to also add display: inline-block in order to use it on HTML elements like <a>, <span>, <em>, <kbd>, etc.
body {
font-family: "HelveticaNeue-Medium", sans-serif;
font-size: 12px;
}
a.vertical-scaling {
display: inline-block;
transform: scale(1, 1.5);
/* Safari and Chrome */
-webkit-transform: scale(1, 1.5);
/* Firefox */
-moz-transform: scale(1, 1.5);
/* IE 9+ */
-ms-transform: scale(1, 1.5);
/* Opera */
-o-transform: scale(1, 1.5);
}
<ul>
<li><a class="vertical-scaling" href="/">HOME</a></li>
<li><a href="/expert-witness">EXPERT WITNESS<a/></li>
</ul>