Html&CSS/html5&css3
0227_html5/css3_3D transforms
.Epona.
2020. 3. 4. 04:06
<style>
div{font-size:20px; font-weight:800; margin-bottom: 30px;}
/*[ 3D transforms ] */
.box1{ width: 100px; height: 100px; background-color: skyblue ; margin: 50px;
transform: perspective(200px) translateZ( -10px ) rotateX(50deg)
}
.box2{ width: 100px; height: 100px; background-color: yellow; margin: 50px;
transform: perspective(100px) translateZ( -10px ) rotateX( -50deg )
}
.box3{ width: 100px; height: 100px; background-color: green; margin: 50px;
transform: perspective(300px) translateX(50px) rotateY( 60deg)
}
.box4{ width: 100px; height: 100px; background-color: palevioletred; margin: 50px;
transform: perspective(300px) translateY(50px) rotateY(-60deg)
}
</style>
</head>
<body>
<h3> [ 3D transforms ] </h3>
<div class="box1">box1</div>
<div class="box2">box2</div>
<div class="box3">box3</div>
<div class="box4">box4</div>
<br/>
</body>