Transformation 3D CSS3
Pour maîtriser l'effet de transformation 3D, vous pouvez utiliser trois méthodes comme avancée, à savoir rotateX, rotateY, rotateZ ; dans la transformation 2D, rotate() signifie rotation Puisqu'il s'agit d'une transformation 2D, elle ne tourne que sur un plan. , donc pas besoin de subdiviser.
Méthode 1.rotateX() :
<!DOCTYPE html>
<html>
<head>
<meta charset=" utf-8">
<meta name="author" content="http://ask.php.cn/" />
<title>php中文网</title>
<style type="text/css">
#box{
position:relative;
height:200px;
width:200px;
margin-top:150px;
margin-left:150px;
border:1px solid black;
}
#inner{
padding:50px;
position:absolute;
border:1px solid black;
background-color:yellow;
font-size:12px;
transform-origin:0px 0px;
-ms-transform-origin:0px 0px;
-webkit-transform-origin:0px 0px;
-o-transform-origin:0px 0px;
-moztransform-origin:0px 0px;
transform:rotateX(0deg);
-ms-transform:rotateX(0deg);
-webkit-transform:rotateX(0deg);
-o-transform:rotateX(0deg);
-moz-transform:rotateX(0deg);
}
table{
font-size:12px;
width:300px;
margin-left:120px;
}
.left{text-align:right}
</style>
<script type="text/javascript">
function changeRot(value){
var oinner=document.getElementById('inner');
var opersp=document.getElementById('persp');
oinner.style.transform="rotateX(" + value + "deg)";
oinner.style.msTransform="rotateX(" + value + "deg)";
oinner.style.webkitTransform="rotateX(" + value + "deg)";
oinner.style.MozTransform="rotateX(" + value + "deg)";
oinner.style.OTransform="rotateX(" + value + "deg)";
opersp.innerHTML=value + "deg";
}
window.onload=function(){
var range=document.getElementById("range");
range.onmousemove=function(){
changeRot(this.value);
}
}
</script>
</head>
<body>
<div id="box">
<div id="inner">php中文网</div>
</div>
<table>
<tr>
<td class="left">旋转:</td>
<td><input type="range" min="-360" max="360" id="range" value="0"/></td>
</tr>
<tr>
<td class="left">rotateX:</td>
<td>(<span id="persp">0deg</span>)</td>
</tr>
</table>
</body>
</html>Le code ci-dessus démontre la fonction de rotateX(), qui peut contrôler les éléments autour du axe des x Effectuez une pirouette comme un gymnaste sur une barre horizontale.
Méthode 2.rotateY() :
<!DOCTYPE html>
<html>
<head>
<meta charset=" utf-8">
<meta name="author" content="http://ask.php.cn/" />
<title>php中文网</title>
<style type="text/css">
#box{
position:relative;
height:200px;
width:200px;
margin-top:150px;
margin-left:150px;
border:1px solid black;
}
#inner{
padding:50px;
position:absolute;
border:1px solid black;
background-color:yellow;
font-size:12px;
transform-origin:0px 0px;
-ms-transform-origin:0px 0px;
-webkit-transform-origin:0px 0px;
-o-transform-origin:0px 0px;
-moztransform-origin:0px 0px;
transform:rotateY(0deg);
-ms-transform:rotateX(0deg);
-webkit-transform:rotateY(0deg);
-o-transform:rotateY(0deg);
-moz-transform:rotateY(0deg);
}
table{
font-size:12px;
width:300px;
margin-left:120px;
}
.left{text-align:right}
</style>
<script type="text/javascript">
function changeRot(value){
var oinner=document.getElementById('inner');
var opersp=document.getElementById('persp');
oinner.style.transform="rotateY(" + value + "deg)";
oinner.style.msTransform="rotateY(" + value + "deg)";
oinner.style.webkitTransform="rotateY(" + value + "deg)";
oinner.style.MozTransform="rotateY(" + value + "deg)";
oinner.style.OTransform="rotateY(" + value + "deg)";
opersp.innerHTML=value + "deg";
}
window.onload=function(){
var range=document.getElementById("range");
range.onmousemove=function(){
changeRot(this.value);
}
}
</script>
</head>
<body>
<div id="box">
<div id="inner">php中文网</div>
</div>
<table>
<tr>
<td class="left">旋转:</td>
<td><input type="range" min="-360" max="360" id="range" value="0"/></td>
</tr>
<tr>
<td class="left">rotateY:</td>
<td>(<span id="persp">0deg</span>)</td>
</tr>
</table>
</body>
</html>Le code ci-dessus démontre la fonction de rotateY(), il can L'élément de commande tourne autour de l'axe y, comme un pole dance tournant sur un poteau vertical.
Méthode Three.rotateZ() :
<!DOCTYPE html>
<html>
<head>
<meta charset=" utf-8">
<meta name="author" content="http://ask.php.cn/" />
<title>php中文网</title>
<style type="text/css">
#box{
position:relative;
height:200px;
width:200px;
margin-top:150px;
margin-left:150px;
border:1px solid black;
}
#inner{
padding:50px;
position:absolute;
border:1px solid black;
background-color:yellow;
font-size:12px;
transform-origin:0px 0px;
-ms-transform-origin:0px 0px;
-webkit-transform-origin:0px 0px;
-o-transform-origin:0px 0px;
-moztransform-origin:0px 0px;
transform:rotateZ(0deg);
-ms-transform:rotateZ(0deg);
-webkit-transform:rotateZ(0deg);
-o-transform:rotateZ(0deg);
-moz-transform:rotateZ(0deg);
}
table{
font-size:12px;
width:300px;
margin-left:120px;
}
.left{text-align:right}
</style>
<script type="text/javascript">
function changeRot(value){
var oinner=document.getElementById('inner');
var opersp=document.getElementById('persp');
oinner.style.transform="rotateZ(" + value + "deg)";
oinner.style.msTransform="rotateZ(" + value + "deg)";
oinner.style.webkitTransform="rotateZ(" + value + "deg)";
oinner.style.MozTransform="rotateZ(" + value + "deg)";
oinner.style.OTransform="rotateZ(" + value + "deg)";
opersp.innerHTML=value + "deg";
}
window.onload=function(){
var range=document.getElementById("range");
range.onmousemove=function(){
changeRot(this.value);
}
}
</script>
</head>
<body>
<div id="box">
<div id="inner">php中文网</div>
</div>
<table>
<tr>
<td class="left">旋转:</td>
<td><input type="range" min="-360" max="360" id="range" value="0"/></td>
</tr>
<tr>
<td class="left">rotateZ:</td>
<td>(<span id="persp">0deg</span>)</td>
</tr>
</table>
</body>
</html>Le code ci-dessus démontre la fonction de rotateZ(), qui peut contrôler la rotation des éléments autour du z -axe. Concernant l'axe Z, ceux qui ont étudié la géométrie solide devraient être relativement clairs à ce sujet. Vous pouvez le connaître en effectuant simplement une recherche sur Baidu. Les trois codes ci-dessus ont clairement démontré les effets des trois fonctions de rotation.
nouveau fichier
<!DOCTYPE html>
<html>
<head>
<meta charset=" utf-8">
<meta name="author" content="http://ask.php.cn/" />
<title>php中文网</title>
<style type="text/css">
#box{
position:relative;
height:200px;
width:200px;
margin-top:150px;
margin-left:150px;
border:1px solid black;
}
#inner{
padding:50px;
position:absolute;
border:1px solid black;
background-color:yellow;
font-size:12px;
transform-origin:0px 0px;
-ms-transform-origin:0px 0px;
-webkit-transform-origin:0px 0px;
-o-transform-origin:0px 0px;
-moztransform-origin:0px 0px;
transform:rotateZ(0deg);
-ms-transform:rotateZ(0deg);
-webkit-transform:rotateZ(0deg);
-o-transform:rotateZ(0deg);
-moz-transform:rotateZ(0deg);
}
table{
font-size:12px;
width:300px;
margin-left:120px;
}
.left{text-align:right}
</style>
<script type="text/javascript">
function changeRot(value){
var oinner=document.getElementById('inner');
var opersp=document.getElementById('persp');
oinner.style.transform="rotateZ(" + value + "deg)";
oinner.style.msTransform="rotateZ(" + value + "deg)";
oinner.style.webkitTransform="rotateZ(" + value + "deg)";
oinner.style.MozTransform="rotateZ(" + value + "deg)";
oinner.style.OTransform="rotateZ(" + value + "deg)";
opersp.innerHTML=value + "deg";
}
window.onload=function(){
var range=document.getElementById("range");
range.onmousemove=function(){
changeRot(this.value);
}
}
</script>
</head>
<body>
<div id="box">
<div id="inner">php中文网</div>
</div>
<table>
<tr>
<td class="left">旋转:</td>
<td><input type="range" min="-360" max="360" id="range" value="0"/></td>
</tr>
<tr>
<td class="left">rotateZ:</td>
<td>(<span id="persp">0deg</span>)</td>
</tr>
</table>
</body>
</html>
Aperçu
Clear
- Recommandations de cours
- Téléchargement du didacticiel
Le didacticiel n'est pas disponible au téléchargement pour le moment. Le staff est actuellement en train de l'organiser. Veuillez prêter plus d'attention à ce cours à l'avenir ~
Les étudiants qui ont regardé ce cours apprennent également
Parlons brièvement de la création d'une entreprise en PHP
Introduction rapide au développement web front-end
Développement pratique à grande échelle par Tianlongbabu du cadre MVC version Mini imitant le site Web de l'encyclopédie des choses embarrassantes
Premiers pas avec le développement pratique PHP : création rapide de PHP [Small Business Forum]
Vérification de connexion et forum de discussion classique
Collecte de connaissances sur les réseaux informatiques
Démarrage rapide de la version complète de Node.JS
Le cours front-end qui vous comprend le mieux : HTML5/CSS3/ES6/NPM/Vue/...[Original]
Écrivez votre propre framework PHP MVC (40 chapitres en profondeur/gros détails/à lire absolument pour que les débutants progressent)