HTML and CSS Reference
In-Depth Information
Objective 4.4: Thought experiment
By combining the transition with the transform, you are able to create effects that you other-
wise would not be able to create. For example, if you want to create the effect of a box spin-
ning or rotating, you can apply a
transform: rotate(360deg)
; to the box. However, this happens
so fast that you cannot see that the box rotated. Alternatively, by applying a transform effect
with a longer duration, you actually can see the box rotate. Look at the following code, which
demonstrates this effect on a series of
div
boxes:
<html>
<head>
<style>
div {
margin: 10px 10px 10px 10px;
height: 50px;
width: 50px;
background-color: red;
transition: transform 3s;
}
div:hover {
transform: rotate(360deg);
}
</style>
</head>
<body>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
</body>
</html>
Objective 4.4: Review
Correct answer:
A
1.
Correct:
display:none
; will hide an element but keep its space in the overall flow.
A.
Incorrect
:
visibility: hidden
; will maintain the element in the normal flow.
B.
Incorrect
:
display: inline
; will show the element in the normal flow.
C.
Incorrect
:
visibility: visible
; will show the element in the normal flow.
D.
Search WWH ::
Custom Search