CSS-3D(立方体旋转)

最新推荐文章于 2023-03-25 10:29:53 发布

我叫长安，你叫故里

最新推荐文章于 2023-03-25 10:29:53 发布

阅读量126

点赞数 1

分类专栏： CSS-3D 文章标签： html5

本文链接：https://blog.csdn.net/weixin_51297712/article/details/112248223

版权

CSS-3D 专栏收录该内容

2 篇文章 0 订阅

订阅专栏

本文详细探讨了CSS3中3D效果的实现，重点在于3D坐标系的理解，以及透视（perspective）、变换（transform）、旋转（rotate）和位移（translate）的应用。通过设置perspective属性调整透视效果，利用transform-style: preserve-3d确保3D变换的呈现。配合HTML结构和自定义CSS样式，可以创建出令人印象深刻的3D立方体旋转效果。

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

核心词汇：3D坐标系，透视(perspective)、变换(transform)、旋转(rotate)和位移(translate)
几个关键样式：
perspective: 500px; 透视距离。距离越大，透视越明显。
transform-style: preserve-3d; 变换模式为3D。这个很重要，3D变换的父标签添加，它的作用是让子标签的变换 transform 为3D效果

效果如下图：

1609838524875

HTML结构

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>transform3D</title>
    <link rel="stylesheet" href="css/public.css">
    <link rel="stylesheet" href="css/style.css">
</head>
<body>
<!-- 立方体旋转 -->
<div class="box">
    <ul>
        <li>1</li>
        <li>2</li>
        <li>3</li>
        <li>4</li>
        <li>5</li>
        <li>6</li>
    </ul>
</div>
<!-- 立方体旋转end -->
</body>
</html>

CSS样式
1、公共样式：public

@charset "utf-8";
*{
    margin: 0;
    padding: 0;
}
body{
    font-family: Arial,Verdana,"Microsoft YaHei",STXihei,SimSun;
    font-size: 16px;
}
ul,li,ol{
    list-style: none;   /*去掉列表自带样式*/
}

2、自己要写的样式：style

@charset "utf-8";
.box{
    width: 300px;
    height: 300px;
    border: 1px #000 solid;
    margin: 100px auto;
    perspective: 200px;
}
.box ul{
    width: 100px;
    height: 100px;
    position: relative;
    margin: 100px;
    transition: 2s;
    transform-style: preserve-3d;  /*变成一个3D空间*/
    transform-origin: center center -50px; /*旋转基点*/
    animation: rotate 2s linear infinite;
}
.box ul li{
    width: 100px;
    height: 100px;
    position: absolute;
    font-size: 26px;
    color: #fff;
    line-height: 100PX;
    text-align: center;
}
/*对每一个面进行处理*/
.box ul li:nth-child(1){
    left: 0;
    top: 0;
    background: #32DBC6;
}
.box ul li:nth-child(2){
    left: 100px;
    top: 0;
    background: #C9E5C8;
    transform-origin: left;
    transform: rotateY(90deg);
}
.box ul li:nth-child(3){
    left: -100px;
    top: 0;
    background: #FABEA7;
    transform-origin: right;
    transform: rotateY(-90deg);
}
.box ul li:nth-child(4){
    left: 0;
    top: -100px;
    background: #D9ADAD;
    transform-origin: bottom;
    transform: rotateX(90deg);
}
.box ul li:nth-child(5){
    left: 0;
    top: 100px;
    background: #F7D6BF;
    transform-origin: top;
    transform: rotateX(-90deg);
}
.box ul li:nth-child(6){
    left: 0;
    top: 0;
    background: #FBE2E5;
    transform:  translateZ(-100px) rotateY(180deg);
}
/*利用帧动画让立方体不停旋转*/
@keyframes rotate {
    0%{
        transform: rotateY(0);
    }
    100%{
        transform:rotateY(360deg);
    }
}
.box ul:hover{
    animation-play-state: paused; /*鼠标移上去让它停止旋转*/
}