Beispiel:CSS3 transform-scaleZ.html

Aus SELFHTML-Wiki
Wechseln zu: Navigation, Suche

<!DOCTYPE html> <html> <head>

 <meta charset="utf-8">
 <meta name="viewport" content="width=device-width, initial-scale=1.0" >
 <link rel="stylesheet" media="screen" href="./Beispiel:Grundlayout.css" >
 <title>Skalieren mit scaleZ()</title>
 <style>
 section{
   border-radius: 0.5em;
   height: 10em;
   width: 30em;
   margin: 1em;
   padding: 1em;
   transition: all 1s;
 }
 .scalez {
   background: black;
   color: gold;
 }
 .scalez:hover {
   transform: perspective(1000px) scaleZ(3) rotateX(45deg);
 }

</style> </head>

<body>

Skalieren mit scaleZ()

Bewege die Maus auf diesen Inhaltsbereich!

   <section class="scalez">

CSS:

     transform: perspective(1000px) scaleZ(3) rotateX(45deg);

In einer weit, weit enfernten Galaxis ....

   </section>


</body> </html>