纯CSS3制作3D旋转照片

最新推荐文章于 2022-04-29 20:23:52 发布

RoddyLD

最新推荐文章于 2022-04-29 20:23:52 发布

阅读量588

点赞数

分类专栏： css3 文章标签： css3

本文链接：https://blog.csdn.net/RoddyLD/article/details/111997558

版权

本文详细介绍了如何仅使用CSS3来构建3D旋转照片的效果。首先，搭建了项目的HTML基本结构，然后通过CSS3设置3D空间并将照片定位。接着，添加动画效果，使父元素围绕Y轴匀速360°旋转。最后，提供了完整的CSS3代码实现。

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

纯CSS3制作3D旋转照片

一、搭建项目的基本结构

Visual Studio Code编写body代码快捷键：

div.father>div.son$*8

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>3D旋转照片</title>
    <style>
        *{
    
            margin: 0;
            padding: 0;
        }
        :root,body{
    
            height: 100%;
            width: 100%;
            background-color: black;
        }
        .father{
    
            width: 300px;
            height: 300px;
            position: absolute;
            left: calc(50% - 150px);
            /* 水平居中 */
            top: calc(50% - 150px);
            /* 垂直居中 */
        }
        .father div{
    
            width: 300px;
            height: 300px;
            position: absolute;
            background-size: 300px 300px;
        }
        .son1{
    
            background-image: url(img/1.jpg);
        }
        .son2{
    
            background-image: url(img/2.jpg);
        }
        .son3{
    
            background-image: url(img/3.jpg);
        }
        .son4{
    
            background-image: url(img/4.jpg);
        }
        .son5{
    
            background-image: url(img/5.jpg);
        }
        .son6{
    
            background-image: url(img/6.jpg);
        }
        .son7{
    
            background-image: url(img/7.jpg);
        }
        .son8{