轮播图（3）

最新推荐文章于 2023-12-05 17:00:00 发布

贰拾壹先生

最新推荐文章于 2023-12-05 17:00:00 发布

阅读量143

点赞数 1

分类专栏： Web前端文章标签：旋转木马轮播 css html js

本文链接：https://blog.csdn.net/zheng18237111686/article/details/114679611

版权

轮播（三）

3D倒影旋转木马（二）

1，需求，

在之前的3D旋转木马的基础上，添加了倒影效果

2，原理

通过设置CSS动效，设置容器里面的每一个DIV的旋转角度

其中：添加 perspective 属性时，其子元素会获得透视效果，而不是元素本身，视为了增强视觉

3，代码

<!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 type="text/css">
     * {
    
         margin: 0px;
         padding: 0px;
     }
     body {
    
         /* 弹性布局，让页面元素水平垂直剧中 */
         display: flex;
         justify-content: center;
         align-items: center;
         height

最低0.47元/天解锁文章

贰拾壹先生

关注

1
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
轮播图（3）

轮播（三）3D倒影旋转木马（二）1，需求，在之前的3D旋转木马的基础上，添加了倒影效果2，原理通过设置CSS动效，设置容器里面的每一个DIV的旋转角度其中：添加 perspective 属性时，其子元素会获得透视效果，而不是元素本身，视为了增强视觉3，代码<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta n
复制链接

扫一扫