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>

 

EX_html5_0227_3Dtransforms.html
0.00MB