×

×

Correct!

Exercise:

Add a 2 second transition effect for background, and transform changes of the <div> element.

Hint: Use the transition property, with 2 sets of values (separated by comma).

Edit This Code:

​x
 
<!DOCTYPE html><html><head><style> div {  width: 100px;  height: 100px;  background: red;}​div:hover {  background: blue;  transform: rotate(180deg);}</style></head><body>​<div></div>​<p>Hover over the div element above.</p>​</body>​<!-- Mirrored from www.w3schools.com/css/exercise.asp?filename=exercise_css3_transitions4 by HTTrack Website Copier/3.x [XR&CO'2014], Wed, 05 Jun 2019 13:17:37 GMT --></html>​

Result:

Correct Code:

xxxxxxxxxx

Result:

Completed 0 of 138 Exercises:

CSS Syntax

Exercise 1 Exercise 2 Exercise 3 Exercise 4 Go to CSS Syntax Tutorial

CSS How To...

Exercise 1 Exercise 2 Exercise 3 Exercise 4 Go to CSS How To... Tutorial

CSS Background

Exercise 1 Exercise 2 Exercise 3 Exercise 4 Exercise 5 Go to CSS Background Tutorial

CSS Border

Exercise 1 Exercise 2 Exercise 3 Exercise 4 Go to CSS Border Tutorial

CSS Margin

Exercise 1 Exercise 2 Exercise 3 Exercise 4 Go to CSS Margin Tutorial

CSS Padding

Exercise 1 Exercise 2 Exercise 3 Go to CSS Padding Tutorial

CSS Height/Width

Exercise 1 Exercise 2 Go to CSS Height/Width Tutorial

CSS Box Model

Exercise 1 Exercise 2 Exercise 3 Exercise 4 Go to CSS Box Model Tutorial

CSS Outline

Exercise 1 Exercise 2 Exercise 3 Go to CSS Outline Tutorial

CSS Text

Exercise 1 Exercise 2 Exercise 3 Exercise 4 Exercise 5 Go to CSS Text Tutorial

CSS Font

Exercise 1 Exercise 2 Exercise 3 Exercise 4 Exercise 5 Go to CSS Font Tutorial

CSS Links

Exercise 1 Exercise 2 Exercise 3 Exercise 4 Go to CSS Links Tutorial

CSS Lists

Exercise 1 Exercise 2 Exercise 3 Exercise 4 Go to CSS Lists Tutorial

CSS Tables

Exercise 1 Exercise 2 Exercise 3 Exercise 4 Exercise 5 Exercise 6 Go to CSS Tables Tutorial

CSS Display/Visibility

Exercise 1 Exercise 2 Exercise 3 Exercise 4 Go to CSS Display/Visibility Tutorial

CSS Positioning

Exercise 1 Exercise 2 Exercise 3 Exercise 4 Exercise 5 Go to CSS Positioning Tutorial

CSS Overflow

Exercise 1 Exercise 2 Exercise 3 Go to CSS Overflow Tutorial

CSS Align

Exercise 1 Exercise 2 Go to CSS Align Tutorial

CSS Combinators

Exercise 1 Exercise 2 Exercise 3 Exercise 4 Go to CSS Combinators Tutorial

CSS Pseudo-classes

Exercise 1 Exercise 2 Exercise 3 Exercise 4 Go to CSS Pseudo-classes Tutorial

CSS Pseudo-elements

Exercise 1 Exercise 2 Exercise 3 Go to CSS Pseudo-elements Tutorial

CSS Opacity

Exercise 1 Exercise 2 Go to CSS Opacity Tutorial

CSS Attribute Selectors

Exercise 1 Exercise 2 Exercise 3 Exercise 4 Exercise 5 Exercise 6 Go to CSS Attribute Selectors Tutorial

CSS Rounded Corners

Exercise 1 Exercise 2 Go to CSS Rounded Corners Tutorial

CSS Border Images

Exercise 1 Exercise 2 Go to CSS Border Images Tutorial

CSS Backgrounds

Exercise 1 Exercise 2 Exercise 3 Exercise 4 Exercise 5 Go to CSS Backgrounds Tutorial

CSS Colors

Exercise 1 Exercise 2 Exercise 3 Exercise 4 Go to CSS Colors Tutorial

CSS Gradients

Exercise 1 Exercise 2 Exercise 3 Exercise 4 Exercise 5 Exercise 6 Exercise 7 Go to CSS Gradients Tutorial

CSS Shadow Effects

Exercise 1 Exercise 2 Exercise 3 Exercise 4 Exercise 5 Go to CSS Shadow Effects Tutorial

CSS Text

Exercise 1 Exercise 2 Exercise 3 Go to CSS Text Tutorial

CSS Web Fonts

Exercise 1 Exercise 2 Go to CSS Web Fonts Tutorial

CSS 2D Transforms

Exercise 1 Exercise 2 Exercise 3 Exercise 4 Go to CSS 2D Transforms Tutorial

CSS 3D Transforms

Exercise 1 Exercise 2 Exercise 3 Go to CSS 3D Transforms Tutorial

CSS Transitions

Exercise 1 Exercise 2 Exercise 3 Exercise 4 Exercise 5 Go to CSS Transitions Tutorial

CSS Animations

Exercise 1 Exercise 2 Exercise 3 Exercise 4 Exercise 5 Exercise 6 Go to CSS Animations Tutorial