css3 3d效果及动画学习

css参考手册：

http://www.phpstudy.net/css3/

http://www.css88.com/book/css/

呈现3d效果：-webkit-transform-style:preserve-3d;

透视距离：-wenkit-perspective:300;

视角：-webkit-perspective-origin:25% 75%；/*数字正负均可*/

旋转和变换：transform: translatex(-90px) translatez(90px) rotatey(90deg);/*rotateX旋转X轴,rotateY旋转Y轴,rotateZ旋转Z轴translateX,translateY,translateZ在XYZ轴上移动scaleZ(sz)Z轴缩放*/

旋转页面要先设置position: absolute;使其脱离文档流。

动画效果：animation /*简写属性，用于设置动画。*/-webkit-transform-origin: 90px 90px 90px;/*设置旋转基准点*/@keyframes/*设置动画*/

时间： 2024-10-09 22:56:30

css3 3d效果及动画学习的相关文章

css3 3D变换和动画

3D变换和动画建立3D空间,transform-style: preserve-3d perspective: 100px; 景深 perspective-origin:center center -180px; 景深基点 transform新增函数如下: rotateX(); rotateY(); rotateZ(); translateZ(); scaleZ(); 3d动画demo,只支持Webkit内核,可自行运行查看效果 <!DOCTYPE HTML> <html> &

CSS3,3D效果轮播图

---恢复内容开始--- 大家还记得我昨天的3D拖拽立方体吗??我昨天还说过css还可以做轮播图,所以咱们今天就写一下,css的轮播图吧! ....这个轮播图主要是用CSS3里的transform的旋转属性来完成3D效果的,然后配合原生js的显示隐藏,达到了3D旋转轮播图的效果: <!DOCTYPE HTML> <html> <head> <meta http-equiv="Content-Type" content="text/ht

CSS3悬停效果和动画Hover.css

Hover.css 是一套基于 CSS3 的鼠标悬停效果和动画,这些可以非常轻松的被应用到按钮.LOGO 以及图片等元素.所有这些效果都是只需要单一的标签,必要的时候使用 before 和 after 伪元素.因为使用了CSS3过渡.转换和动画效果,因此只支持 Chrome.Firefox 和 Safari 等现代浏览器. 使用方法很简单: 下载HOVER.CSS 下载地址https://github.com/IanLunn/Hover Download/Install NPM: np

css3 - 3d效果立方体

1. 立方体的上下: .cubeBottom{ transform: rotateX(90deg) ; transform-origin:center bottom ; /* :绕x旋转,主要确定y的高度 : right bottom , 1px 300px, 2px 300px,.. 100px 300px .. */ } 2. 立方体的左右: .cubeLeft{ transform: rotateY(90deg) ; transform-origin:left center ; /* :

css3 3d 效果

1 2 3 4 5 6 7 8 1 2 3 4 5 6 7 8 1 2 3 4 5 6 7 8 $color:red ,yellow ,blue ,green ,gray ,black ,purple ,orange; @-webkit-keyframes move { 0% { transform: rotateY(0deg); } 100% { transform: rotateY(360deg); } } body { padding: 200px; @at-root .content {

jQuery/CSS3 3D焦点图动画

在线演示本地下载原文地址:https://www.cnblogs.com/qixidi/p/10058026.html

纯CSS3炫酷3D折叠面板动画特效

这是一款效果非常炫酷的CSS3 3D折叠面板动画特效.该折叠面板特效当鼠标移动到图片上时,一个面板会以3d折叠的方式在顶部展开,并显示图片的标题等信息..这个效果使用3D CSS animations 来制作折叠面板的动画,纯CSS,没有使用javascript. 在线演示:http://www.htmleaf.com/Demo/201501251276.html 下载地址:http://www.htmleaf.com/css3/css3donghua/201501251275.html

纯CSS3超酷3D旋转立方体动画特效

这是一款效果非常炫酷的纯CSS3 3D旋转立方体动画特效.该3D立方体使用CSS3 perspective制作,可以在水平方向.垂直方向和平面视角方向旋转,效果相当震撼.使用CSS3来制作动画效果已经成为WEB前端开发的一种时尚,从简单的颜色和尺寸动画,到复杂的旋转.翻转动画, CSS3展现了它无穷的魅力.使用CSS来制作立方体动画,代码简洁易懂,效果更是令人惊叹! 在线演示:http://www.htmleaf.com/Demo/201501251274.html 下载地址:http://ww

8套迷人精致的CSS3 3D按钮动画

1.纯CSS3 3D按钮按钮酷似牛奶般剔透 CSS3按钮一般都可以设计的非常漂亮,利用投影.渐变等CSS3属性特效可以把按钮渲染的十分动感.今天分享的这款CSS3按钮外观非常特别,它看上去酷似晶莹剔透的牛奶,而且在点击按钮时出现3D效果的动画,按钮按下时,按钮会轻轻的弹动一下,非常逼真. 在线演示源码下载 2.纯CSS3实现动感弹性按钮今天我们来分享一款很有意思的CSS3按钮,当你把鼠标滑过按钮时,整个按钮就会全身扭动起来,像是有弹性一样,非常动感.另外,按钮的结构非常简单,你可以通过合适