Tagged Questions

CSS transforms allows elements styled with CSS to be transformed in two-dimensional or three-dimensional space.

learn more… | top users | synonyms

6
votes
2answers
58 views

Reflect A Letter Horizontally Using CSS

I know how to reflect single letters vertically using transform: rotate(); but not how to reflect horizontally. Do you know how I can reflect horizontally? I want to use it with the selector ...
1
vote
2answers
29 views

css transform doesn't work on css generated content for ::after, ::before elements

http://jsfiddle.net/chovy/enmxu/ <a href="#">Inbox</a> a { text-decoration: none; } a::after { content: ' ⇧'; transform: rotate(180deg); } According to this site, it was fixed in ...
1
vote
2answers
23 views

CSS 3D buggy hover issue

I'm having trouble with a simple 3D transform: http://jsfiddle.net/2uFuh when I hover the cursor on any link everything goes well, but when I slowly move the cursor pixel by pixel accross the link ...
0
votes
1answer
13 views

JS feature detect preserve-3d property support for nested elements

Anyone knowing if it's possible and if so how can I detect if preserve-3d property fully supported? By that I mean 3D positioning of nested element relative to it's 3D positioned parent all with CSS3 ...
0
votes
1answer
25 views

Make background follow the cursor

I'm trying to make the background-position follow the cursor within the relative dimensions of the 'figure'. JSFiddle here: http://jsfiddle.net/LJCkj/ It's off by a few pixels and I'm not sure how to ...
0
votes
1answer
18 views

CSS Transformation Create Door open effect and stay open

HI I am playing with the CSS transform effect I am trying to create 2 divs that open showing the site. I have this working but when the doors have finished opening they reappear and hide the content, ...
1
vote
0answers
59 views

Get elements top and left position after being rotated

When I rotate an element via myElem.css('-moz-transform', 'rotate(' + degree + 'deg)'); myElem.css('-webkit-transform', 'rotate(' + degree + 'deg)'); myElem.css('-o-transform', 'rotate(' + degree + ...
0
votes
1answer
44 views

CSS3 transform:rotate on hover

I have a nice animation set up so I have a bullet shooting a star that then rotates all after you hover over the gun, All works as it should but....... After you take the mouse off the gun the star ...
1
vote
0answers
21 views

Safari transform rotatex bug

I have a weird bug with safari... I have 3 divs with captions, which are hidden with rotateX(-91deg). On :hover the caption comes down via rotateX(0deg). It works perfectly in Chrome etc. When i ...
0
votes
1answer
43 views

css3 rotate not coming back on hovering out

I am rotating an image by css3 transform #services .info img{ -ms-transform: rotate(0deg) rotateY(0); /* IE 9 */ -webkit-transform: rotate(0deg) rotateY(0); /* Safari and Chrome */ -o-transform: ...
0
votes
1answer
42 views

center element css 3d transforms

I have a css 3d transforms site. There are several css 3d positioned elements, including some nested inside of other 3d transformed elements. All of the transformed elements are inside of one big ...
2
votes
1answer
36 views

Resize only one edge

How could you resize only one edge of a block-element? I thought about using a rotation (transform-origin on the other edge then rotate around the center), but it'll look different, when it is placed ...
2
votes
2answers
81 views

CSS3: transform property not working as expected in chrome

I am trying to achieve the below thing ..And its working pretty well in firefox but the same css working in chrome is somewhat like this shown below I think -webkit-transform-origin: 50% 100%; ...
1
vote
2answers
57 views

CSS3 Transform - why does increasing height cause element to move down?

Take a look at the following code when it's rendered in Chrome. It will show two slides, a red square facing you and a blue square facing up: <!doctype html> <html lang="en"> ...
0
votes
0answers
34 views

bxSlider - Single image carousel and JQM performance

I have a few bxSliders throughout a site which has both a desktop and mobile version, the latter rendered with media queries and jQuery Mobile. The first issue occurs when a slideshow/carousel has ...
0
votes
0answers
17 views

Can css3 translateZ() be used instead of z-index?

For example having 2 div's positioned absolute, one can put first div upon second by setting first div's z-index higher than second one's. Can we achieve such behaviour using translateZ() or ...
2
votes
2answers
71 views

How do I move elements of a page, without triggering a repaint?

I am currently trying to figure out, how I can move elements (to a arbitrary position) on a web page without triggering repaints of the content (and thus missing the 60fps budget). My approach was, ...
1
vote
1answer
175 views

converting css transform to zoom and position

I'd like to do pinch zoom and panning with hardware-accelerated transform: translate3d() scale3d() CSS. Once the gesture is complete, I reset the transform and switch to CSS zoom and absolute ...
0
votes
1answer
52 views

CSS keyframe animation -webkit-transform reset Chrome Bug

I'm getting a bug using CSS keyframe animation. When animating the -webkit-transform property, if I add -webkit-animation-play-state: paused; and then remove it, the animation quickly jumps back to ...
0
votes
0answers
26 views

Slow transition on jQuery animation only on Chrome

I'm using a combination of modernizr, jquery and the carousel plug in. function activate_carousel() { window.carousel_activated = 1; $('#listing_detail_photo_slider').jcarousel({ ...
0
votes
0answers
17 views

How to calculate right transformation to create cut off the corner on the div in certain angle using CSS

I want to create effect of page corner cliping like in turn.js, I know that I need two divs the outside one need to have positive rotation and inside one need the same amount but negative, and both ...
0
votes
1answer
101 views

How page turn effect work in turn.js

I want to implement similar thing (page flip) and was wondering how turn.js created it's effect. It use css transformation: translation and rotation to create the effect. I was checking in inspector ...
1
vote
1answer
75 views

Rotating elements according to cursor position with jQuery

What I'm trying to make is a jQuery script that rotate the elements inside a div, depending on the cursor position in the browser window. The proportion is something like: maximum_pixels_x-axys : ...
0
votes
1answer
74 views

Cannot use css 3d transforms in Opera 12.16

the NVIDIA Quadro FX 1500 graphic adapter on my old XP system is fairly old and seems not on list of supported Chrome HW; however, I managed to enable 3d transforms on Chrome, using this: in address ...
0
votes
0answers
22 views

Make twitter bootstrap tooltip slidefade

I am trying to customize the twitter bootstrap tooltip, small but a useful customization i am trying to build in this version... Like the question title suggests, trying to make the tooltip fade with ...
0
votes
0answers
22 views

Implementing a cube using CSS tranforms: one face repositioned properly in X and Y but not in Z

First sorry for bad title. I couldn't describe what I'm getting well. I'm experimenting with CSS transforms. Tried to build a cube but something is not playing right: I wrote another code without ...
1
vote
1answer
39 views

CSS Animation based on 2d transform functions in Chrome and Safari, but not in Firefox

I have a simple loading animation that involves rotating a div with a background image. For whatever reason, the animation functions flawlessly in Chrome and Safari, but fails to animate in Firefox. ...
2
votes
1answer
59 views

CSS3 flexible/responsive Flip card loses back face at end of transform

Similar to a few other examples of flip cards: similar example 1 However the answer is normally to ensure no background is on the containing card, and specified on the front and back face of the ...
0
votes
2answers
40 views

CSS3 transform complex rotation unexpected behavior

With a div viewed in perspective and having the transformations rotateY(-90deg) rotateX(-180deg), prepending rotateZ(-90deg) does not give a rotation of -90 degrees but instead gives a rotation of ...
0
votes
0answers
27 views

CSS3 Transform - Skew

I am trying to create boxes as they appear on this site: http://www.instanthousecall.com/features.html The website uses Joomla, while I need to do this in WordPress. I've examined the code thoroughly ...
0
votes
2answers
29 views

Video Embeds and CSS transitions & transforms

I have added transition effects to a container div that contains videos. I getting a black screen where the video embed is supposed to be. I tried both youtube and vimeo and they're both not working, ...
0
votes
1answer
16 views

CSS3 Rotate and Auto Width

How do I make to adjust its width by the size of rotated div - currently it gets oversized as if its contents wasn't rotated. <!DOCTYPE html> <html> <head> ...
1
vote
2answers
30 views

After transform onclick targets only half of the element. How to fix it?

If you take a look on the fiddle here (using chrome or safari), you can see an example. After applying the transforms the click only targets the lower half of my red rectangle and I need it to target ...
0
votes
1answer
17 views

perform a rotate transition on a scaled object CSS 3

I have a series of objects all of which have different scaled value using the css 3 transform tag. My problem is that when I try to attach an animation on hover (in this case its a rotation) they ...
0
votes
1answer
32 views

CSS transitions on child element when hovering the parent

I'm trying to figure out how to "animate" the child of a hovered element. How is this so complicated to get it work across multiple browsers? what's the best practise? .parent { ...
0
votes
0answers
13 views

CSS3 animation outside of the element parent boundary is slow on Firefox

While creating a MineSweeper game in JavaScript I stumbled in a quirk of Firefox occurring when a CSS animation "overflows" the boundary of the parent of the animated element. When the player right ...
0
votes
0answers
58 views

Why does a hardware accelerated change in height cause a flicker on Safari?

I'm trying to track down a bug in Mobile Safari on iOS. The issue is related to CSS3 3d transforms and/or how webkit renders 3d stacked elements. Edit: At first I thought this was just an iOS bug on ...
0
votes
1answer
56 views

Webkit: CSS3 2D transform Scale + cubic bezier issue (when argument > 1)

I wanted to create a "bouncy" animation for an element using: div{ -webkit-transform:scale(0); -moz-transform:scale(0); -ms-transform:scale(0); -webkit-transition:all 0.4s ...
1
vote
1answer
100 views

Vexillology - Greece Flag waving Effect without canvas

I am developing Greece Country Flag I am not supposed to use Canvas :( I am not supposed to use any images :( I have done good progress in developing into final shape, but i am unable to code ...
2
votes
0answers
46 views

SVGPAN - smooth transition zoom in effect

Is it possible to have smooth zoom in effect on svg element? I'm using svgpan script and understand that the zoom in is control by transform attribute. transform="matrix(0.6,0,0,0.6,0,0) Can ...
0
votes
2answers
30 views

CSS3 Transform - handling the after-hovering behavior

In this CSS3 code when I hover on the class it rotates by 360 degree, but when I go away from the class it back as it was . The question: how can i make the class rotating even when I go away ? The ...
0
votes
1answer
71 views

-webkit-backface-visibility doesn't work in node-webkit on Windows

I'm using node-webkit to build a self-contained web app demo, and for some reason, the -webkit-backface-visibility CSS3 property doesn't work – but only when I run the app on Windows, not on Mac. ...
0
votes
1answer
74 views

How can I make this CSS transition less shaky in Firefox?

Please test the following fiddle in Safari or Chrome as well as Firefox. You will notice that the animation is smooth in Safari, even after the mouse is no longer hovering over the div (when the div ...
1
vote
1answer
52 views

LESS css “transform” syntax | on-the-fly scaling with LESS css?

What is the proper syntax for the css "transform" property in preprocessor LESS? The following, for example, throws me an error: .transform(scale(1.1)) { -webkit-transform: @transform; ...
0
votes
0answers
30 views

Strange behavior with input when inside translated div on mobile webkit

I have noticed a very strange behavior with text inputs on mobile webkit (mobile safari/android stock browser/chrome) When an input is inside a div (or any container) that is transformed (has ...
0
votes
1answer
44 views

Css Animation not working in Google Chrome

I am trying to use this loader in my web site, scc animation works well in Firefox & IE but doesn't work in Google Chrome. #loader{ width: 820px; height: 670px; border: none; ...
0
votes
2answers
286 views

CSS Folding Paper Like Menu Issue

I'm trying to build a menu that would have a transition like paper folding, kinda like this one: Live Test : http://www.cssplay.co.uk/menus/cssplay-3d-unfolding-menu.html Here is my code: HTML ...
0
votes
1answer
44 views

Are css 3d transforms fully suported on android > 3.0?

According to caniuse.com Android fully supports css 3d transforms. But it seems that "preserve-3d" is not supported. (I can only test it via Browserstack.) Watch this 3d Cube experiment on android: ...
1
vote
2answers
130 views

Tests for “preserve-3d” are not working on Android (via Browserstack)?

Android is supposed to support css 3d transforms completely since version 3.0 according to caniuse.com. When I run one of the tests below (e.g. on Android 4.1, Samsng Galaxy), they return true. ...
0
votes
1answer
54 views

Transform scale() inconsistent in Chrome and Safari when refreshing page

I wrote the code below to scale all content along with the browser size, so that all content is always visible (in a scaled-up or scaled-down version). var docHeight = $(document).height(); var ...

1 2 3 4 5 … 8
15 30 50 per page