css3练习——三维动画

最新推荐文章于 2024-08-13 22:20:49 发布

·青红造了个白·

最新推荐文章于 2024-08-13 22:20:49 发布

阅读量88

点赞数

文章标签： css3

本文链接：https://blog.csdn.net/weixin_43861647/article/details/119278226

版权

本文通过CSS3实现了一个正方体的3D动画效果，利用transform-style: preserve-3d属性保持子元素的3D空间排列，并通过关键帧动画@keyframes实现正方体的旋转展示，各个面分别设置了不同的背景图片，形成一个完整的3D立方体视觉效果。

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

用css3动画制造正方体

html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>正方体</title>
    <link rel="stylesheet" href="css/index.css">
</head>
<body>
    <ul>
        <li></li>
        <li></li>
        <li></li>
        <li></li>
        <li></li>
        <li></li>
    </ul>
</body>
</html>

css

*{
    margin:0px;
    padding:0px;
    list-style: none;
}
ul{
    width:200px;
    height:200px;
    /* background: green; */
    border:1px dashed red;
    margin:100px auto;
    transform-style: preserve-3d;/* 表示所有子元素在3D空间中呈现。 */
    position:relative;
    transform:rotateX(0deg) rotateY(0deg) rotateZ(0deg);
    animation:move 5s infinite linear;
}
li{
    width:200px;
    height:200px;
    position:absolute;
    top:0px;
    left: 0px;
}
li:nth-of-type(1){
    /* 前面 */
    transform:translateZ(100px);
    background:url('../images/pic01.png');
}
li:nth-of-type(2){
    /* 后面 */
    transform: translateZ(-100px);
    background:url('../images/pic02.png');
}
li:nth-of-type(3){
    /* 左边 */
    transform: translateX(-100px) rotateY(90deg);
    background: url('../images/pic03.png');
}
li:nth-of-type(4){
    /* 右边 */
    transform: translateX(100px) rotateY(90deg);
    background: url('../images/pic04.png');
}
li:nth-of-type(5){
    /* 上面 */
    transform:translateY(-100px) rotateX(90deg);
    background: url('../images/pic05.png');
}
li:nth-of-type(6){
    /* 下面 */
    transform: translateY(100px) rotateX(90deg);
    background:url('../images/pic06.png');
}
@keyframes move{
    0%{
        transform: rotateX(0deg) rotateY(0deg) rotateZ(0deg);
    }
    100%{
        transform: rotateX(360deg) rotateY(360deg) rotateZ(360deg);
    }
}

·青红造了个白·

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
css3练习——三维动画

用css3动画制造正方体html<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"&.
复制链接

扫一扫