Heim > Artikel > Web-Frontend > So erzielen Sie mit CSS3 stereoskopische 3D-Effekte
So erzielen Sie mit CSS3 stereoskopische 3D-Effekte
- php中世界最好的语言Original
- 2018-03-14 14:56:071678Durchsuche
Dieses Mal zeige ich Ihnen, wie Sie mit CSS3 dreidimensionale 3D-Spezialeffekte erzielen Schauen Sie mal rein. Tatsächlich bietet CSS3 viele Tools, mit denen wir sehr coole Dinge erreichen können. Viele Spezialeffekte müssen nicht durch komplexen JS-Code erreicht werden, sondern können durch einfachen CSS3-Code erreicht werden Lassen Sie uns über die Implementierung von 3D-Boxen und Animationen sprechen.
Um diese legitime Box zu realisieren, müssen Sie ein grundlegendes Verständnis des Inhalts von CSS3 haben und die grundlegende Syntax in CSS3 beherrschen:
- Verstehen Sie die Eigenschaften des Skalierens, Drehens und Verschiebens bei der Transformation in CSS3.
- Erfahren Sie mehr über die Implementierung von Animationen in CSS3.
- Verstehen Sie die übermäßigen Spezialeffekte in CSS3.
- Der Code in HTML ist sehr einfach. Sie müssen nur sechs Blockelemente festlegen. Der wichtigste und wichtigste Teil ist der Code in CSS3 Bei einer spezifischen Implementierung werde ich dem Code Kommentare hinzufügen.
<!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>Empfohlene Lektüre:
Ausführliche Erklärung des Konstruktormusters von JS-EntwurfsmusternWarum sollte das Frontend Modularität verwenden? ?Das obige ist der detaillierte Inhalt vonSo erzielen Sie mit CSS3 stereoskopische 3D-Effekte. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!