<!DOCTYPE HTML><HTML> <Head> <MetaCharSet= "UTF-8"> <title></title> <styletype= "Text/css">#first{width:200px;Height:200px;Background-color:Orange;Margin-left:200px;Margin-top:200px; /*========= Transition ========*/transition:5s; }#first: Hover{ /*===========2d==========*/ /*transform:rotate (45deg);*/ /*in-plane rotation*/ /*transform:translate (30px,30px); Move the position, representing the right 30px, down 30px*/ /*Transform:scale (2); Magnification of multiples*/ /*Transform:skew (0DEG,-30DEG); Twisted*/ /*Transform:skew (30deg,30deg);*/ /*===========3d=============*/ /*Transform:rotatex (180deg);*/ /*Transform:rotatey (360deg);*/ /*Transform:rotatez (360deg);*/ }#second{width:300px;Height:300px;background:Black;position:relative; /*relative positioning*//*The position attribute is added due to the need for location change*/Animation:Mysecond 5s Infinite/*Alternate; Animation bundle, two values, animated name/duration, plus an infinite execution, alternating execution*/; }@keyframes Mysecond{ /*change position and background color*/0%{background:Red;Border-radius:90px/*to add a rounded border to an element*/;Box-shadow:-35px 0px 15px Gray; Left:0px;Top:0px;}25%{background:Yellow;Border-radius:0px; Left:400px;Top:0px;}50%{background:Blue;Border-radius:90px; Left:400px;Top:300px;}75%{background:Green;Border-radius:0px;Box-shadow:0px 30px 15px Gray; Left:0px;Top:300px;}100%{background:Red;Border-radius:20px; Left:0px;Top:0px;} /*From{background:red;border-radius:90px;box-shadow: -35px 0px 15px gray;left:0px;top:0px;} to{background:yellow;border-radius:0px;left:400px;top:0px;} }*/ </style> </Head> <Body> <!--<div id= "First" > Today weekend </div> - <!----------------Animation------------- - <DivID= "Second"> </Div> </Body></HTML>
--Rotary Transform
-----2D
--------Rotate (EDG) in-plane rotation
--------Translate (Landscape, portrait)
--------Scale (wide, high)
--------Skew (horizontal angle, vertical angle)
-----3D
--------Rotatex (EDG)
--------Rotatey (EDG)
--Transition transition:3s time is not hover and that container needs to be added to that container.
--Animation
-----Properties: Animation: Animated name, duration, plus an infinite execution, alternating execution
[email protected] Animation name {
0%
25%
50%
75%
100%
}
----------------Animation Name {
form{}
to{}
}
050602 classroom CSS3 Rotation, transitions, animations