CSS

Getting Started Selectors Background Transform Transition Grid Filter Fonts Dead Center SASS Mobile (@media) Animation Print ***
O O

Weather Controls

Time Of Day
Rain
Wind Speed
Wind Direction
Clouds

CSS : Transform

2017-01-01

Translate

CSS3 transform:translate is the next gen to css2 position:fixed


.translate {
    transform:translate(-25px,25px);
}
.translateX {
    transform:translateX(50px);
}
.translateY {
    transform:translateY(54px);
}

See the Pen oGxoOm by ninjajalapeno (@ninjajalapeno) on CodePen.

#Rotate ```css .rotate { transform: rotate(7deg); } .rotateX { transform:rotateX(15deg); } .rotateY { transform:rotateY(15deg); } ```

See the Pen MEyOMO by ninjajalapeno (@ninjajalapeno) on CodePen.

#scale scale ```css .scale { transform:scale(0.7); } .scaleX { transform:scaleX(0.7); } .scaleY { transform:scaleY(0.7); } ``` #skew ```css .skew { transform:skew(10deg,10deg); } .skewX { transform:skewX(10deg); } .skewY { transform:skewY(10deg); } ``` #matrix matrix ```css .matrix { /*transform:matrix(1, 0, 0, 1, 0, 0);*/ /*default*/ transform:matrix(1.5, .5, .5, 1.5, 15, 15); } ```