CSS3 3D的正方体效果(transform-style: preserve-3d)

最新推荐文章于 2024-08-13 13:48:48 发布

houyanhua1

最新推荐文章于 2024-08-13 13:48:48 发布

阅读量2.2k

点赞数

本文链接：https://blog.csdn.net/houyanhua1/article/details/79665258

版权

本文通过CSS3的transform-style: preserve-3d属性，详细讲解如何实现一个旋转的3D正方体效果。通过实例代码demo.html，读者可以了解并实践这一技术。

摘要由CSDN通过智能技术生成

demo.html：

<!DOCTYPE html>          
<html lang="en">          
<head>          
    <meta charset="UTF-8">          
    <title>Document</title>          
    <style>  
        .box {
            width: 250px;
            height: 250px;
            margin: 100px auto;
            position: relative;
            border: 5px dashed red;
            border-radius: 50%;

            /* 让子盒子保持3D效果 */
            transform-style: preserve-3d;
            /*perspective: 500px;*/   /* 透视:近大远小的效果。 只是模拟的3D效果,本质上还是2D */

            animation: animate1 8s linear infinite;  /* 动画持续时间 匀速 循环 */
        }

        .box>div {
            width: 100%;
            height: 100%;
            position: absolute;
            text-align: center;
            line-height: 250px;
            font-size: 60px;
            color: #