Спонсор: Microsoft
Опубликован: 29.08.2012 | Доступ: свободный | Студентов: 2113 / 187 | Длительность: 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
Александр Лобанов
Александр Лобанов

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

Александр Шнайдман
Александр Шнайдман
Израиль, Тель Авив