Свойства CSS: Как преобразованные дочерние элементы сохраняют трехмерные преобразования
Перейти на страницу упражнений
Решение:
HTML-код:
<!DOCTYPE html>
<html>
<head>
<title>How to transformed child elements preserve the 3D transformations</title>
<style type="text/css">
#div1 {
position: relative;
height: 250px;
width: 230px;
margin: 100px;
padding: 10px;
border: 1px solid #CC0099;
}
#div2 {
padding: 50px;
position: absolute;
border: 1px solid #6633FF;
background-color: #0000CC;
-webkit-transform: rotateY(60deg);
-webkit-transform-style: preserve-3d;
transform: rotateY(60deg);
transform-style: preserve-3d;
}
#div3 {
padding: 50px;
position: absolute;
border: 1px solid #FF0000;
background-color: #33CCFF;
-webkit-transform: rotateY(-60deg);
transform: rotateY(-60deg);
}
</style>
</head>
<body>
<h1><strong>w3resource Tutorial</strong></h1>
<div id="div1">
<div id="div2"><strong>w3resource</strong>
<div id="div3">Web Development Tutorial</div>
</div>
</div>
</body>
</html>
Демонстрация в реальном времени:
См. Pen Transform-style-answer от w3resource ( @ w3resource ) в CodePen .
Поддерживаемый браузер
да | да | да | да | да |
Каков уровень сложности этого упражнения?
Новый контент: Composer: менеджер зависимостей для PHP , R программирования
disqus2code