|
Даю задания для студентов. Они хотят повторно пройти курс. Как отписаться от выполненного курса, что бы пройти его заново? |
Инспектор
Спонсор: Microsoft
Вы можете этот курс.
Опубликован: 29.08.2012 | Уровень: специалист | Доступ: платный
Практическая работа 12:
Знакомство с технологией WebKit
Пример 7 (sample_7) Двухмерные и трехмерные трансформации
Откройте блокнот и наберите следующий код:
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title></title>
<styletype="text/css">
#div1
{
position: relative;
height: 200px;
width: 200px;
margin: 50px;
padding:10px;
border: 1pxsolidblack;
}
#divRectangle
{
padding:50px;
position: absolute;
border: 1pxsolidblack;
background-color: #ffd800;
transform: rotate(45deg);
transform-origin:50%50%;
-webkit-transform: rotate(45deg);
-webkit-transform-origin:20%40%;
-webkit-transform: scale(1,1);
}
</style>
<scripttype="text/javascript">
functionGetTransformed() {
theTranslationX = document.getElementById('GetTranslatedX').value;
theTranslationY = document.getElementById('GetTranslatedY').value;
document.getElementById('divRectangle').style.webkitTransformOrigin = theTranslationX + '% ' + theTranslationY + '%';
demoDiv = document.getElementById("divRectangle");
theScale = document.getElementById("GetScaled").value;
theRotation = document.getElementById("rotate").value + "deg";
theXSkew = document.getElementById("skewX").value + "deg";
theYSkew = document.getElementById("skewY").value + "deg";
theZScale = document.getElementById("scaleZ").value;
theXRotation = document.getElementById("rotateX").value + "deg";
theYRotation = document.getElementById("rotateY").value + "deg";
theZRotation = document.getElementById("rotateZ").value + "deg";
theZTranslation = document.getElementById("translateZ").value + "px";
theTransform = "scale(" + theScale + ")" + " rotate(" + theRotation + ")";
theTransform += " skew(" + theXSkew + ", " + theYSkew + ")";
theTransform += " rotateX(" + theXRotation + ")" + " rotateY(" + theYRotation + ")
" + " rotateZ(" + theZRotation + ")";
theTransform += " scaleZ(" + theZScale + ")" + " translateZ(" + theZTranslation + ") ";
demoDiv.style.webkitTransform = theTransform;
}
</script>
</head>
<body>
<divid="div1">
<divid="divRectangle">HTML5</div>
</div>
<h3>Думерные преобразования</h3>
<tableborder="0">
<tr>
<td>Вращение:</td>
<td><inputtype="range"min="-360"max="360"
value="0"onchange="GetTransformed()"id="rotate"/></td>
</tr>
<tr>
<td>Перемещение по горизонтали:</td>
<td><inputtype="range"min="-200"max="200"
value="0"onchange="GetTransformed()"id="GetTranslatedX"/></td>
</tr>
<tr>
<td>Перемещение по вертикали:</td>
<td><inputtype="range"min="-200"max="200"
value="0"onchange="GetTransformed()"id="GetTranslatedY"/></td>
</tr>
<tr>
<td>Масштаб:</td>
<td><inputtype="range"min="0.1"max="5"
value="0.9"onchange="GetTransformed()"id="GetScaled"/></td>
</tr>
<tr>
<td>Растяжение по горизонтали:</td>
<td><inputtype="range"min="-360"max="360"
value="0"onchange="GetTransformed()"id="skewX"/></td>
</tr>
<tr>
<td>Растяжение по вертикали:</td>
<td><inputtype="range"min="-360"max="360"
value="0"onchange="GetTransformed()"id="skewY"/></td>
</tr>
</table>
<h3>Трехмерные преобразования</h3>
<tableborder="0">
<tr>
<td>Масштабирование по оси Z</td>
<td><inputtype="range"min="0.1"max="10"
value="0.9"onchange="GetTransformed()"id="scaleZ"/></td>
</tr>
<tr>
<td>Поворот вокруг оси X</td>
<td><inputtype="range"min="-360"max="360"
value="0"onchange="GetTransformed()"id="rotateX"/></td>
</tr>
<tr>
<td>Поворот вокруг оси Y</td>
<td><inputtype="range"min="-360"max="360"
value="0"onchange="GetTransformed()"id="rotateY"/></td>
</tr>
<tr>
<td>Поворот вокруг оси Z</td>
<td><inputtype="range"min="-360"max="360"
value="0"onchange="GetTransformed()"id="rotateZ"/></td>
</tr>
<tr>
<td>Перенос относительно оси Z</td>
<td><inputtype="range"min="-400"max="400"
value="0"onchange="GetTransformed()"id="translateZ"/></td>
</tr>
</table>
<br/><br/>
<divid="demo"></div>
</body>
</html>
Александр Лобанов
