Опубликован: 29.08.2012 | Доступ: свободный | Студентов: 2161 / 215 | Длительность: 08:05:00
Практическая работа 12:

Знакомство с технологией WebKit

< Лекция 7 || Практическая работа 12: 123

Пример 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>
    

< Лекция 7 || Практическая работа 12: 123
Александр Лобанов
Александр Лобанов

Даю задания для студентов. Они хотят повторно пройти курс. Как отписаться от выполненного курса, что бы пройти его заново?