纯css实现奥运五环、3D平移、旋转、扭曲

这篇具有很好参考价值的文章主要介绍了纯css实现奥运五环、3D平移、旋转、扭曲。希望对大家有所帮助。如果存在错误或未考虑完全的地方,请大家不吝赐教,您也可以点击"举报违法"按钮提交疑问。


前言

1、不是真正的五环,因为通过形变得来。
2、不同电脑显示器的像素不同,显现的效果不同。
3、不推荐使用此方法。
4、主要通过旋转加平移的方式实现。


效果图

纯css实现奥运五环、3D平移、旋转、扭曲,web前端,HTML,CSS,css,3d,css3,web,web前端,前端文章来源地址https://www.toymoban.com/news/detail-696045.html


html

<div class="olympic_rings">
    <span class="ring"></span>
    <span class="ring"></span>
    <span class="ring"></span>
    <span class="ring"></span>
    <span class="ring"></span>
</div>

css

.olympic_rings {
    display: flex;
    flex-wrap: wrap;
    width: 400px;
    justify-content: center;
    transform-style: preserve-3d;
}

.ring {
    width: 100px;
    height: 100px;
    border: 10px solid #3884c2;
    border-radius: 50%;
    margin: 0 5px;
}

.ring:nth-child(2) {
    border-color: #000000;
    transform: translateZ(-1px) rotateX(2deg);
}

.ring:nth-child(3) {
    border-color: #d83a31;
    transform: translateZ(10px) rotateY(-15deg);
}

.ring:nth-child(4) {
    border-color: #f9d549;
    margin-top: -50px;
    transform: rotateX(1deg);
    transform-origin: center 15%;
}

.ring:nth-child(5) {
    border-color: #55ac58;
    margin-top: -50px;
    transform: rotateX(3deg);
    transform-origin: center 15%;
}

到了这里,关于纯css实现奥运五环、3D平移、旋转、扭曲的文章就介绍完了。如果您还想了解更多内容,请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章,希望大家以后多多支持TOY模板网!

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处: 如若内容造成侵权/违法违规/事实不符,请点击违法举报进行投诉反馈,一经查实,立即删除!

领支付宝红包 赞助服务器费用

相关文章

  • 【CSS笔记】CSS动画效果(2d、3d)之渐变色、过渡、变换、平移、缩放、旋转、倾斜、关键帧动画

    这篇文章,主要介绍CSS动画效果(2d、3d)之渐变色、过渡、变换、平移、缩放、旋转、倾斜、关键帧动画。 目录 一、2d动画 1.1、渐变色 (1)线性渐变色 (2)径向渐变色

    2024年02月02日
    浏览(93)
  • Web3D数学基础(平移、旋转、缩放矩阵)—WebGL、WebGPU、Threejs

    参考资料:threejs中文网 threejs qq交流群:814702116 本下节课给大家介绍下矩阵的概念,以及用于几何变换的矩阵,比如平移矩阵、缩放矩阵、旋转矩阵。 如果你对这些几何变换的矩阵概念比较熟悉,可以跳过本节课。 线性代数、图形学 如果你有《线性代数》、《计算机图形学

    2024年02月03日
    浏览(53)
  • python使用turtle绘制奥运五环

    python使用turtle绘制奥运五环 奥林匹克标志中五个环的大小,颜色,间距有固定的比例,规定圆的半径为45,五个圆的起始坐标为(-110,-25),(0,-25),(110,-25),(-55,-75),(55,-75),五环的颜色分别为red, blue, green, yellow, black.提示:turtle goto(x,y)函数,能够将t

    2024年02月11日
    浏览(44)
  • 前端 CSS 3D 照片墙自动旋转案例(详细步骤)

    案例动画 Gif 动画地址,图片太大传不上来! 案例 DEMO 源码地址 ,仅供参考。

    2024年01月18日
    浏览(60)
  • 【前端领域】3D旋转超美相册(HTML+CSS)

    世界上总有一半人不理解另一半人的快乐。 ——《爱玛》 目录 一、前言 二、本期作品介绍    3D旋转相册 三、效果展示 四、详细介绍  五、编码实现 index.html style.css  img  六、获取源码 公众号获取源码  获取源码?私信?关注?点赞?收藏?         新的一年,我们

    2024年02月02日
    浏览(49)
  • web前端:3d立体旋转+源码+详解

    思路:            直接插入代码: 代码段中所有移动100px,都是移动图片的中心点到四个边,然后旋转搭建立方体

    2024年02月12日
    浏览(48)
  • 前端css/less绕椭圆轨道旋转动画 带遮挡效果 3D

    效果如图,多个物体在轨道上绕中心物体旋转,当旋转到物体后面时将被遮挡。主要使用css实现,为了简化代码,引入less进行处理。 本质上是使用动画控制轨道带动内部的物体进行旋转,计算出每个物体在椭圆轨道上的位置,使用绝对定位放置物体。由于轨道上物体有多个

    2024年02月03日
    浏览(92)
  • html的过渡、平移、旋转与3d属性

    一、过渡属性 过渡属性介绍: css3的transition允许css的属性值在一定的时间区间内平滑地过渡。这种效果可以在鼠标单击、获得焦点、被点击或对元素任何改变中触发,并圆滑地以动画效果改变CSS的属性值 注意点: 过渡效果对display:none;和display:blok;不起作用 语法: 动画类型示

    2024年02月10日
    浏览(47)
  • Unity 3d角色展示脚本(旋转 平移 缩放)展示界面

    不考虑性能 很简陋的一个功能,主要是用于角色渲染的观察用,比simplecontroller要好用一点

    2024年02月11日
    浏览(56)
  • 【Unity3D】缩放、平移、旋转场景

    1 前言         场景缩放、平移、旋转有两种实现方案,一种是对场景中所有物体进行同步变换,另一种方案是对相机的位置和姿态进行变换。         对于方案一,如果所有物体都在同一个根对象下(其子对象或孙子对象),那么只需要对根对象施加变换就可以实现场景变

    2023年04月22日
    浏览(57)

觉得文章有用就打赏一下文章作者

支付宝扫一扫打赏

博客赞助

微信扫一扫打赏

请作者喝杯咖啡吧~博客赞助

支付宝扫一扫领取红包,优惠每天领

二维码1

领取红包

二维码2

领红包