Shulou(Shulou.com)06/01 Report--

In this article, the editor introduces in detail "HTML5 how to make 3D Love Animation effect". The content is detailed, the steps are clear, and the details are handled properly. I hope this "HTML5 how to make 3D Love Animation effect" article can help you solve your doubts.

The implementation code is as follows:

Html Code:

XML / HTML code copies content to text

< div class ='heart3d' >

< div class ='rib1' >

< div class ='rib2' >

< div class ='rib3' >

< div class ='rib4' >

< div class ='rib5' >

< div class ='rib6' >

< div class ='rib7' >

< div class ='rib8' >

< div class ='rib9' >

< div class ='rib10' >

< div class ='rib11' >

< div class ='rib12' >

< div class ='rib13' >

< div class ='rib14' >

< div class ='rib15' >

< div class ='rib16' >

< div class ='rib17' >

< div class ='rib18' >

< div class ='rib19' >

< div class ='rib20' >

< div class ='rib21' >

< div class ='rib22' >

< div class ='rib23' >

< div class ='rib24' >

< div class ='rib25' >

< div class ='rib26' >

< div class ='rib27' >

< div class ='rib28' >

< div class ='rib29' >

< div class ='rib30' >

< div class ='rib31' >

< div class ='rib32' >

< div class ='rib33' >

< div class ='rib34' >

< div class ='rib35' >

< div class ='rib36' >

So many div, mainly to construct the line area of love.

CSS Code:

CSS code copies content to text

.heart3d {

Position: absolutely

Maximum: 0

Right: 0

Bottom bottom: 0

Left: 0

Margin: automatic

Width: 100px

Height: 160px

-webkit-transform-style: keep 3D

Conversion style: reserve-3d

-webkit-animation: rotate 15s infinitely linear

Animation: rotate infinitely linear for 15 seconds

}

.heart3D [class ^ = "rib"] {

Position: absolutely

Width: 100px

Height: 160px

Border: solid # f22613

Border-width: 1px 1px 0 0

Border- radius:50%50%0/40%50%0

}

.heart3D [class $= "1"] {

-webkit-transform:rotateY (10deg) rotateZ (45deg) translateX (30px)

Conversion: rotateY (10deg) rotateZ (45deg) translateX (30px)

}

.heart3D [class $= "2"] {

-webkit-transform:rotateY (20deg) rotateZ (45deg) translateX (30px)

Conversion: rotateY (20deg) rotateZ (45deg) translateX (30px)

}

.heart3D [class $= "3"] {

-webkit-transform:rotateY (30deg) rotateZ (45deg) translateX (30px)

Conversion: rotateY (30deg) rotateZ (45deg) translateX (30px)

}

.heart3D [class $= "4"] {

-webkit-transform:rotateY (40deg) rotateZ (45deg) translateX (30px)

Conversion: rotateY (40deg) rotateZ (45deg) translateX (30px)

}

.heart3D [class $= "5"] {

-webkit-transform:rotateY (50deg) rotateZ (45deg) translateX (30px)

Conversion: rotateY (50deg) rotateZ (45deg) translateX (30px)

}

.heart3D [class $= "6"] {

-webkit-transform:rotateY (60deg) rotateZ (45deg) translateX (30px)

Conversion: rotateY (60deg) rotateZ (45deg) translateX (30px)

}

.heart3D [class $= "7"] {

-webkit-transform:rotateY (70deg) rotateZ (45deg) translateX (30px)

Conversion: rotateY (70deg) rotateZ (45deg) translateX (30px)

}

.heart3D [class $= "8"] {

-webkit-transform:rotateY (80deg) rotateZ (45deg) translateX (30px)

Conversion: rotateY (80deg) rotateZ (45deg) translateX (30px)

}

.heart3D [class $= "9"] {

-webkit-transform:rotateY (90deg) rotateZ (45deg) translateX (30px)

Conversion: rotateY (90deg) rotateZ (45deg) translateX (30px)

}

.heart3D [class $= "10"] {

-webkit-transform:rotateY (100deg) rotateZ (45deg) translateX (30px)

Conversion: rotateY (100deg) rotateZ (45deg) translateX (30px)

}

.heart3D [class $= "11"] {

-webkit-transform:rotateY (110deg) rotateZ (45deg) translateX (30px)

Conversion: rotateY (110deg) rotateZ (45deg) translateX (30px)

}

.heart3D [class $= "12"] {

-webkit-transform:rotateY (120deg) rotateZ (45deg) translateX (30px)

Conversion: rotateY (120deg) rotateZ (45deg) translateX (30px)

}

.heart3D [class $= "13"] {

-webkit-transform:rotateY (130deg) rotateZ (45deg) translateX (30px)

Conversion: rotateY (130deg) rotateZ (45deg) translateX (30px)

}

.heart3D [class $= "14"] {

-webkit-transform:rotateY (140deg) rotateZ (45deg) translateX (30px)

Conversion: rotateY (140deg) rotateZ (45deg) translateX (30px)

}

.heart3D [class $= "15"] {

-webkit-transform:rotateY (150deg) rotateZ (45deg) translateX (30px)

Conversion: rotateY (150deg) rotateZ (45deg) translateX (30px)

}

.heart3D [class $= "16"] {

-webkit-transform:rotateY (160deg) rotateZ (45deg) translateX (30px)

Conversion: rotateY (160deg) rotateZ (45deg) translateX (30px)

}

.heart3D [class $= "17"] {

-webkit-transform:rotateY (170deg) rotateZ (45deg) translateX (30px)

Conversion: rotateY (170deg) rotateZ (45deg) translateX (30px)

}

.heart3D [class $= "18"] {

-webkit-transform:rotateY (180deg) rotateZ (45deg) translateX (30px)

Conversion: rotateY (180deg) rotateZ (45deg) translateX (30px)

}

.heart3D [class $= "19"] {

-webkit-transform:rotateY (190deg) rotateZ (45deg) translateX (30px)

Conversion: rotateY (190deg) rotateZ (45deg) translateX (30px)

}

.heart3D [class $= "20"] {

-webkit-transform:rotateY (200deg) rotateZ (45deg) translateX (30px)

Conversion: rotateY (200deg) rotateZ (45deg) translateX (30px)

}

.heart3D [class $= "21"] {

-webkit-transform:rotateY (210deg) rotateZ (45deg) translateX (30px)

Conversion: rotateY (210deg) rotateZ (45deg) translateX (30px)

}

.heart3D [class $= "22"] {

-webkit-transform:rotateY (220deg) rotateZ (45deg) translateX (30px)

Conversion: rotateY (220deg) rotateZ (45deg) translateX (30px)

}

.heart3D [class $= "23"] {

-webkit-transform:rotateY (230deg) rotateZ (45deg) translateX (30px)

Conversion: rotateY (230deg) rotateZ (45deg) translateX (30px)

}

.heart3D [class $= "24"] {

-webkit-transform:rotateY (240deg) rotateZ (45deg) translateX (30px)

Conversion: rotateY (240deg) rotateZ (45deg) translateX (30px)

}

.heart3D [class $= "25"] {

-webkit-transform:rotateY (250deg) rotateZ (45deg) translateX (30px)

Conversion: rotateY (250deg) rotateZ (45deg) translateX (30px)

}

.heart3D [class $= "26"] {

-webkit-transform:rotateY (260deg) rotateZ (45deg) translateX (30px)

Conversion: rotateY (260deg) rotateZ (45deg) translateX (30px)

}

.heart3D [class $= "27"] {

-webkit-transform:rotateY (270deg) rotateZ (45deg) translateX (30px)

Conversion: rotateY (270deg) rotateZ (45deg) translateX (30px)

}

.heart3D [class $= "28"] {

-webkit-transform:rotateY (280deg) rotateZ (45deg) translateX (30px)

Conversion: rotateY (280deg) rotateZ (45deg) translateX (30px)

}

.heart3D [class $= "29"] {

-webkit-transform:rotateY (290deg) rotateZ (45deg) translateX (30px)

Conversion: rotateY (290deg) rotateZ (45deg) translateX (30px)

}

.heart3D [class $= "30"] {

-webkit-transform:rotateY (300deg) rotateZ (45deg) translateX (30px)

Conversion: rotateY (300deg) rotateZ (45deg) translateX (30px)

}

.heart3D [class $= "31"] {

-webkit-transform:rotateY (310deg) rotateZ (45deg) translateX (30px)

Conversion: rotateY (310deg) rotateZ (45deg) translateX (30px)

}

.heart3D [class $= "32"] {

-webkit-transform:rotateY (320deg) rotateZ (45deg) translateX (30px)

Conversion: rotateY (320deg) rotateZ (45deg) translateX (30px)

}

.heart3D [class $= "33"] {

-webkit-transform:rotateY (330deg) rotateZ (45deg) translateX (30px)

Conversion: rotateY (330deg) rotateZ (45deg) translateX (30px)

}

.heart3D [class $= "34"] {

-webkit-transform:rotateY (340deg) rotateZ (45deg) translateX (30px)

Conversion: rotateY (340deg) rotateZ (45deg) translateX (30px)

}

.heart3D [class $= "35"] {

-webkit-transform:rotateY (350deg) rotateZ (45deg) translateX (30px)

Conversion: rotateY (350deg) rotateZ (45deg) translateX (30px)

}

.heart3D [class $= "36"] {

-webkit-transform:rotateY (360deg) rotateZ (45deg) translateX (30px)

Conversion: rotateY (360deg) rotateZ (45deg) translateX (30px)

}

Render these lines and brake them for 3D visual effect.

Then a set of HTML5 animations named spin are defined:

CSS code copies content to text

@-webkit-keyframes rotation {

To {

-webkit-transform:rotateY (360deg) rotateX (360deg)

Transform: rotateY (360deg), rotateX (360deg)

}

}

@ keyframes spin {

To {

-webkit-transform:rotateY (360deg) rotateX (360deg)

Transform: rotateY (360deg), rotateX (360deg)

}

}

After reading this, the article "how to make 3D Love Animation effects with HTML5" has been introduced. If you want to master the knowledge points of this article, you still need to practice and use it yourself. If you want to know more about related articles, welcome to follow the industry information channel.

Welcome to subscribe "Shulou Technology Information " to get latest news, interesting things and hot topics in the IT industry, and controls the hottest and latest Internet news, technology news and IT industry trends.