Heim >Web-Frontend >CSS-Tutorial >Detaillierte Einführung in CSS-Transformationsattribute
Detaillierte Einführung in CSS-Transformationsattribute
- 高洛峰Original
- 2017-03-20 16:28:321890Durchsuche
transition: Transition Attribut
transition-property gibt die CSS-Eigenschaft zum Festlegen der an Übergangseffekt Der Name kann standardmäßig geschrieben werden all
transition-duration gibt an, wie viele Sekunden oder Millisekunden es dauert, bis der Übergangseffekt abgeschlossen ist
Übergangs-Timing-Funktion: Standard-EaseTransition-Delay: Verzögerungszeit
Ease : allmählich verlangsamen
linear: konstante Geschwindigkeit
Einstieg: beschleunigen
-
Nachlassen -out: verlangsamen
ease-in-out: Zuerst beschleunigen und dann abbremsen
cubic-bezier: Bezier-Kurve
Transitionend: Übervollständigkeit des Ereignisses
function addEnd(obj,fn){
obj.addEventListener('WebkitTransitionEnd',fn,false);
obj.addEventListener('transitionend',fn,false);
}
function removeEnd(obj,fn){
obj.removeEventListener('WebkitTransitionEnd',fn,false);
obj.removeEventListener('transitionend',fn,false);
}注：1在transition里，如果写了多个，那没改变一次样式，就会触发一次事件 2注意重复触发transitionend事件。比如下面重复改变p的y轴位置
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
#nav{position: absolute;left:0;top:0;width: 100px;height: 100px;background: gray;transition: 1s all;}
</style>
</head>
<body>
<div id="nav"></div>
<script>
var oHome=document.getElementById("nav");
var count = 10;
oHome.onclick = function(){
count += 20;
oHome.style.transform = 'translate(0,'+ count +'px)'
addEnd(this,function(){
count += 20;
oHome.style.transform = 'translate(0,'+ count +'px)'
})
}
function addEnd(obj,fn) {
obj.addEventListener('WebkitTransitionEnd',fn,false);
obj.addEventListener('transitionend',fn,false);
}
</script>
</body>
</html>
Transformation: Verformung
Rotation: rotieren(): Grad
Skew: skew(): Degree
skewX
skewY
Skala: Skala(): positive Zahlen, negative Zahlen, Dezimalzahlen
SkalaX
scaleY
Displacement: Translate(): Alle von CSS unterstützten Einheiten können verwendet werden
translateX
translateY >
- transform: scale(2) rotate(50deg); Führen Sie zuerst die Rotation und dann die Skalierung durch
-
-
- Der Wert der obigen Transformation ändert sich auch entsprechend dem Mittelpunkt (Transformationsursprung)
Das obige ist der detaillierte Inhalt vonDetaillierte Einführung in CSS-Transformationsattribute. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!