Maison> interface Web> tutoriel CSS> le corps du texte

CSS3 3D 特效视频教程

炎欲天舞
Libérer: 2017-08-24 11:27:39
original
1736 Les gens l'ont consulté

课程介绍:

Transition

1:CSS3中transition

2:CSS3中transition属性

3:CSS3中transition效果分析

4:CSS3中transition5种效果

练习题

1:创建3D场景

2:创建3D场景

3:实际创建3D场景

4:translate属性

5:transform属性

练习题

1:创建3D动画效果

2:创建3D动画效果结构部分

3:JS部分

4:练习题

5:编程挑战


播放地址://m.sbmmt.com/course/416.html


讲师特点:思路清晰;讲解形象;声音清脆;循环渐进。


难点分析:因为其中使用了很多最新属性,需要注意浏览器的兼容问题,注意多换浏览器,更改兼容性。


课件下载://m.sbmmt.com/xiazai/code/2080


html

      
1
2
3
4
5
6

rotate x: 0 deg


rotate y: 0 deg


rotate z: 0 deg


Copier après la connexion


css

#wrapper { -webkit-perspective: 800; -webkit-perspective-origin: 50% 50%; } #cube { width: 200px; height: 200px; margin: 100px auto; -webkit-transform-style: preserve-3d; } .face { width: 200px; height: 200px; position: absolute; margin: 0 auto; background-color: rgba(0,0,0,0.5); font-size: 200px; text-align: center; line-height: 200px; font-weight: 900; color: #fff; } #face1 { } #face2 { -webkit-transform-origin: right; -webkit-transform: rotateY(-90deg); } #face3 { -webkit-transform-origin: left; -webkit-transform: rotateY(90deg); } #face4 { -webkit-transform: translateZ(-200px); } #face5 { -webkit-transform-origin: top; -webkit-transform: rotateX(-90deg); } #face6 { -webkit-transform-origin: bottom; -webkit-transform: rotateX(90deg); } #op{ margin:0 auto; font-size:16px; font-weight:bold; width:800px; } #op .range-control{width:721px;}
Copier après la connexion


js

function rotate() { var x = document.getElementById("rotatex").value; var y = document.getElementById("rotatey").value; var z = document.getElementById("rotatez").value; document.getElementById('cube').style.webkitTransform = "rotateX(" + x + "deg) rotateY(" + y + "deg) rotateZ(" + z + "deg)"; document.getElementById('deg-x').innerText = x; document.getElementById('deg-y').innerText = y; document.getElementById('deg-z').innerText = z; }
Copier après la connexion


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!

Étiquettes associées:
source:php.cn
Déclaration de ce site Web
Le contenu de cet article est volontairement contribué par les internautes et les droits d'auteur appartiennent à l'auteur original. Ce site n'assume aucune responsabilité légale correspondante. Si vous trouvez un contenu suspecté de plagiat ou de contrefaçon, veuillez contacter admin@php.cn
Derniers articles par auteur
Derniers téléchargements
Plus>
effets Web
Code source du site Web
Matériel du site Web
Modèle frontal
À propos de nous Clause de non-responsabilité Sitemap
Site Web PHP chinois:Formation PHP en ligne sur le bien-être public,Aidez les apprenants PHP à grandir rapidement!