Cette fois, je vais vous montrer comment utiliser CSS3 pour obtenir des effets spéciaux tridimensionnels 3D. Quelles sont les précautions pour utiliser CSS3 pour obtenir des effets spéciaux tridimensionnels 3D. Voici des cas pratiques. jetez un oeil.
En fait, CSS3 fournit de nombreux outils qui nous permettent de réaliser des choses très sympas. De nombreux effets spéciaux n'ont pas besoin d'être réalisés via un code JS complexe, mais peuvent être réalisés via un simple code CSS3. vous le présentera. Parlons de la mise en œuvre de la boîte 3D et de l'animation.
Pour réaliser cette box légitime, vous devez avoir une compréhension de base du contenu du css3 et maîtriser la syntaxe de base en css. Les principaux contenus à maîtriser en css3 sont les suivants :
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>Title</title></head><style> html{ background: radial-gradient(ellipse at center, #2A2A2A 0%, #000000 100%); width: 100%; height:100%; } .sence{ width: 600px; height:600px; position: fixed; top: 0; left:0; right:0; bottom:0; margin: auto; } .box{ width: 300px; height:300px; position: relative; transform-style: preserve-3d; transform-origin: center center 75px; /*允许改变转换元素的位置*/ animation: myfirst 3s linear infinite ; /*指的是匀速变化 并且原路返回*/alternate } .box p{ width: 100%; height:100%; position: absolute; top:0; left:0; border-radius: 5px; transform-style: preserve-3d; box-shadow: 0 0 30px 5px #fff; opacity: 0.8; } @keyframes myfirst { from { transform: skew(0) translate3d(0,0,0) rotateX(0deg) rotateY(0deg) rotateZ(0deg); } to { transform: skew(0deg) translate3d(10px,20px,30px) rotateX(360deg) rotateY(360deg) rotateZ(90deg); } } .box p:nth-child(1){ background-image: url(img/psbe5ZDRJYLJ.jpg);/*照片可以另行添加,也可以换成背景色*/ background-size: 300px 300px; transform-origin: top; transform: rotateX(90deg); } .box p:nth-child(2){ background-image: url(img/psbe7VL5XVBF.jpg); background-size: 300px 300px; transform-origin:left; transform: rotateY(-90deg); } .box p:nth-child(3){ background-image: url(img/psbeL8Q5LRIN.jpg); background-size: 300px 300px; } .box p:nth-child(4){ background-image: url(img/psbeNEXVJIFI.jpg); background-size: 300px 300px; transform-origin:right; transform: rotateY(90deg); } .box p:nth-child(5){ background-image: url(img/psbeUIJ7FZJ6.jpg); background-size: 300px 300px; transform-origin: bottom; transform: rotateX(-90deg); } .box p:nth-child(6){ background-image: url(img/psbR3FYMIPK.jpg); background-size: 300px 300px; transform: translateZ(300px); }</style><body><p class="sence"> <p class="box"> <p> </p> <p> </p> <p> </p> <p> </p> <p> </p> <p> </p> </p></p></body></html>
Explication détaillée du modèle de constructeur des modèles de conception JS
Pourquoi le front-end devrait-il utiliser la modularité ?
Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!