H53D rotation-Tornado, h53d rotation tornado
(-1) Preface
First, I downloaded the image from the Internet and paid tribute to this elder brother. I am using chrome49, without adding different browser prefix, jquery3.0, picture resources on my Baidu cloud disk http://pan.baidu.com/s/1o7LyHp4
(1) Knowledge Preparation a. Concepts of browser x, y, and Z axesThe left-hand vertical represents the y-axis, the right-hand horizontal represents the x-axis, the left-right hand is placed into a cross, the Z-axis is that is, the vertical x-axis is also vertical y-axis through the x, y-junction of a straight line.
B.: nth-of-type (1)Img: nth-of-type (1), the first img sub-element of all parent elements with sub-elements img
Body: nth-of-type (1) is equivalent to body *: nth-of-type (1)
(2) Code<! DOCTYPE html>
<Html lang = "en">
<Head>
<Meta charset = UTF-8>
<Script type = "text/javascript" src = "debug-jquery-3.0.0.js"> </script>
<Script type = "text/javascript" src = "base. js"> </script>
<Link rel = "shortcut icon" href = "favicon. ico" type = "image/x-icon">
<Title> for life </title>
<Style type = "text/css">
*
{
Margin-top: 0px;
Padding: 0;
}
Body
{
Position: absolute;
}
# Lol
{
Width: 530px;
Height: 530px;
Position: absolute;
}
# Lol img
{
Display: block;
Position: absolute;
Border: 1px #6F0000 solid;
}
# Lol img: nth-of-type (1)
{
Animation: one 10 s linear 3 s infinite;
}
@ Keyframes one
{
To
{
Transform: rotateX (360deg );
}
}
# Lol img: nth-of-type (2)
{
Animation: two 10 s linear 2 s infinite;
}
@ Keyframes two
{
To
{
Transform: rotateY (360deg );
}
}
# Lol img: nth-of-type (3)
{
Animation: three 10 s linear 1 s infinite;
}
@ Keyframes three
{
To
{
Transform: rotateZ (360deg );
}
}
</Style>
<Script type = "text/javascript">
$ (Function ()
{
$ ("# Lol"). centerPos ();
// Align the lol element horizontally and vertically. centerPos is a custom function.
})
$. Fn. centerPos = function ()
{
Var parent;
This. each (function (index)
{
Parent = this. parentNode;
If (parent = document. body)
{
Parent = window;
}
Var position = watermark (this).css ("position ");
If (position = "fixed" | position = "absolute ")
{
Attributes (this).css ("left", ($ (parent). width ()-this. offsetWidth)/2 + "px ")
. Css ("top", ($ (parent). height ()-this. offsetHeight)/2 + "px ");
}
Else
{
Window. console. error ("no valid position value is set ");
}
})
Return this;
}
</Script>
</Head
<Body>
<Div id = "lol">
</Div>
</Body>
</Html>
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
