CSS 3D Transforms

3D Rotation:

This example rotates an element throughout the Y-axis, creating a 3D rotation impact.

                          
                            .box {
                                transform: rotateY(45deg); /* Rotate the element around the Y-axis by 45 degrees */
                            }

3D Translation:

This example translates an element in three-dimensional area the usage of the translate3d function.

                          
                            .box {
                                transform: translate3d(50px, 20px, 30px); /* Move the element 50px right, 20px down, and 30px towards the viewer */
                            }

3D Scale:

This instance scales an detail in three-dimensional space using the scale3d function.

                          
                            .box {
                                transform: scale3d(1.5, 1.2, 0.8); /* Scale the element by 1.5 in the X-axis, 1.2 in the Y-axis, and 0.8 in the Z-axis */
                            }

3D Skew:

This instance skews an element in three-dimensional space using the skewX and skewY functions.

                          
                            .box {
                                transform: skewX(30deg) skewY(20deg); /* Skew the element by 30 degrees along the X-axis and 20 degrees along the Y-axis */
                            }

3D Perspective:

This instance units a perspective for a container, affecting the intensity perception of child elements with 3D transforms.

                              
                                .container {
                                    perspective: 1000px; /* Set the perspective for the container */
                                }
                                
                                .box {
                                    transform: rotateX(45deg); /* Rotate the element around the X-axis by 45 degrees */
                                }

3D Rotate and Translate Combined:

This example combines rotation and translation in 3-dimensional area.

                              
                                .box {
                                    transform: rotateX(45deg) translateY(20px); /* Rotate the element around the X-axis by 45 degrees and move it 20px down */
                                }

3D Cube:

This example creates a 3D cube with different faces using various 3D transforms.

                              
                                .cube {
                                    width: 100px;
                                    height: 100px;
                                    transform-style: preserve-3d; /* Preserve the 3D transformations of child elements */
                                }
                                
                                .face {
                                    width: 100%;
                                    height: 100%;
                                    position: absolute;
                                }
                                
                                .front { transform: translateZ(50px); }
                                .back { transform: rotateY(180deg) translateZ(50px); }
                                .left { transform: rotateY(-90deg) translateZ(50px); }
                                .right { transform: rotateY(90deg) translateZ(50px); }
                                .top { transform: rotateX(90deg) translateZ(50px); }
                                .bottom { transform: rotateX(-90deg) translateZ(50px); }

3D Carousel:

This example creates a 3D carousel effect with rotating slides.

                              
                                .carousel {
                                    perspective: 1000px;
                                }
                                
                                .slide {
                                    width: 200px;
                                    height: 150px;
                                    transform-style: preserve-3d;
                                    transform: rotateY(var(--angle));
                                    transition: transform 0.5s ease;
                                }
                                
                                .slide:nth-child(even) { background-color: #3498db; }
                                .slide:nth-child(odd) { background-color: #2ecc71; }