CSS3实现3D圆盘


<html><head><meta charset="utf-8"><title>展示元素移动的原理</title><script type="text/javascript" src="jquery-1.11.2.min.js"></script><style>body {background:#222}.perspective {perspective:800px;}.perspective .wrap {width: 800px;height: 300px;margin: 100px auto;transform-style: preserve-3d; /*为了让div有3D效果*/}.perspective .wrap .plat {width: 1200px;height: 1200px;border-radius: 50%;transform: rotateX(80deg);position: absolute;top: 134%;left: 50%;margin-left: -600px;margin-top: -600px;background: -webkit-radial-gradient(center center,500px 500px,rgb(44, 255, 148),rgb(251, 240, 111),rgb(228, 158, 142),rgb(232, 151, 211),rgb(161, 236, 163),rgba(63,139,175,0));}</style>           <script type="text/javascript"></script></head><body><div class='perspective'><div class='wrap'><div class='plat'></div></div></div></body></html>

CSS3实现3D圆盘相关推荐

网页特效：用CSS3制作3D图片立方体旋转特效
<!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <title&g ...
带你玩转css3的3D！
话不多说,先上demo 酷炫css3走马灯/正方体动画: https://bupt-hjm.github.io/cs... github源码地址:https://github.com/BUPT-HJM ...
jQuery 3D圆盘旋转焦点图支持鼠标滚轮
之前我们分享过很多炫酷实用的jQuery焦点图插件了,今天介绍的这款jQuery焦点图非常特别,所有图片围成一个圆圈,组成一个立体视觉的圆盘,并且可以旋转选择圆盘中的图片.另外,这款jQuery 3D ...
css3实现翻转效果,css3 实现3D翻转效果
css3 实现3D翻转效果. HTML源码: 前面内容,鼠标移到这,试试用户名密码 css源码: /* entire container, keeps perspective */ .flip-c ...
使用 CSS3 实现 3D 图片滑块效果
Slicebox – A fresh 3D image slider with graceful fallback 英文原文地址:http://tympanus.NET/codrops/2011/09 ...
CSS3中3D综合应用及分析
2019独角兽企业重金招聘Python工程师标准>>> 今天我要和大家一起来学习一个酷炫的鼠标Hover效果.主要将会涉及到CSS3中3D效果的使用,以及在实现过程中我们使用到的一些 ...
css3-13 css3的3D动画如何实现
css3-13 css3的3D动画如何实现一.总结一句话总结:这里是transform+setInterval实现.transform属性里面的rotate属性值变成rotateX或rotateY ...
支持javascript的ppt软件_强大CSS3的3D幻灯片工具reveal.js(推荐)
reveal.js是一个基于CSS3的3D幻灯片工具.Reveal.JS是Hakim El Hattab开发的一个演示文稿制作工具,能够制作绚丽的演示文稿并生成HTML格式,将它发布到web上.它使用 ...
html怎么做成3d正方体,利用CSS3的3D效果制作正方体
学会用CSS3的3D效果制作一个正方体,有助于增强我们对3D场景的旋转和位移属性的理解.下面的动态图就是利用3D旋转位移,结合动画效果制作的.感兴趣的同学可以在完成正方体的制作基础上,再去探究一下添加 ...

CSS3实现3D圆盘

CSS3实现3D圆盘相关推荐

最新文章

热门文章