css3图片倾斜3d动画效果

下载地址

一款神奇的jQuery和css3平面图片转换为3d模型动画效果插件。该插件可以将平面图片转换为3d模型，并且该插件还带有地标动画，点击地标可以看到改点地标的内容。现在许多浏览器都支持CSS 3D transformations。我们可以为我们的网页添加许多有趣的动画效果。这一款jQuery和css3平面图片转换为3d模型动画效果就是非常好的动画效果。它模仿平面app屏幕转换为3d模型的动画。HTMLhtml结构包含两个主要的div(.cd-product-intro和.cd-product-mockup)。第一个div放置的是一些介绍详细（标题，按钮等）。第二个div是我们的3d模型。

Download Start

More info

Close

两个额外的div.cd-3d-right-side和.cd-3d-bottom-side是用来制作3d模型的边部。.cd-product-mockup::before用来制作模型的阴影。CSS对于一个小屏幕而言，下面的css代码是非常简单的（你可以自行添加更多的效果）。在桌面设备（屏幕分辨率大于1170px），我们为产品介绍( .cd-product-intro)设置position: absolute和 width: 50%，并且设置left:0以使它放置的屏幕的左边。注意：我们使用 .cd-product-intro::before 伪元素是为了在jQuery中检测当前的css媒体查询：这个技巧是将不同的内容分配到不同的媒体查询中。.cd-product-intro::before { /* never visible - this is used in jQuery to check the current MQ */ content: "mobile"; display: none;}@media only screen and (min-width: 1170px) { .cd-product-intro { position: absolute; left: 0; width: 50%; padding: 0; text-align: left; transition: transform 0.6s, opacity 0.6s; } .cd-product-intro::before { /* never visible - this is used in jQuery to check the current MQ */ content: "desktop"; }}对于模型div .cd-product-mockup，我们设置 width: 450px和margin: 0 auto 使它相对于容器居中。然后使用CSS 3D transformations使它旋转。.cd-product-mockup { width: 90%; /* set here the max-width for the mockup */ max-width: 450px; margin: 0 auto;}@media only screen and (min-width: 1170px) { .cd-product-mockup { transform-style: preserve-3d; transform-origin: center top; transform: rotateX(-60deg) rotateZ(-40deg) translateX(50px) translateY(300px); transition: transform 0.6s; }}使用transform-style: preserve-3d来确保.cd-3d-right-side 和 .cd-3d-bottom-side 被放置到正确的3d面上。为了制作3d滑动效果，我们将模型的底部（.cd-3d-bottom-side）和侧边（.cd-3d-right-side）设置为背景图片。并为它们添加一些额外的css来旋转它们。@media only screen and (min-width: 1170px) { .cd-3d-right-side, .cd-3d-bottom-side { display: block; position: absolute; left: 0; background-image: url(../img/cd-app-image.png); /* Firefox bug - 3D CSS transform, jagged edges */ outline: 1px solid transparent; } .cd-3d-right-side { top: -1px; width: 10px; height: 100%; background-size: auto 100%; transform-origin: left center; transform: translateZ(-1px) translateY(1px) rotateY(-90deg); } .cd-3d-bottom-side { bottom: 0; width: 100%; height: 10px; background-position: bottom center; background-size: 100% auto; transform-origin: center bottom; transform: translateZ(-1px) rotateX(-90deg); }}我们使用 .cd-product-mockup::before 伪元素来制作模型的阴影。@media only screen and (min-width: 1170px) { .cd-product-mockup::before { /* mockup shadow */ display: block; content: ""; position: absolute; top: 0; left: 0; width: 0; /* play with these values to a realistic shadow */ height: 45%; box-shadow: 0px 0px 30px 225px rgba(0, 0, 0, 0.1); transform: translateZ(-100px) translateY(480px); transition: transform 0.6s; }}注意：IE11级以下的IE版本不支持transform-style: preserve-3d。当用户点击了开始按钮，我们为.cd-product添加class .is-product-tour，这时.cd-product-intro被translateX(-50%) ， .cd-product-tour被translateX(0)。我们还通过 CSS3 transitions 来改变透明度的值以使动画过渡变得平滑。JAVASCRIPT我们使用jQuery来在用户点击触发按钮时添加、移除class。当替换点击按钮时，.cd-product被添加class.is-product-tour。通过为 .cd-single-point 添加/移除class .is-open来显示和隐藏地标的显示信息。jQuery(document).ready(function($){ //open interest point description $(".cd-single-point").children("a").on("click", function(){ var selectedPoint = $(this).parent("li"); if( selectedPoint.hasClass("is-open") ) { selectedPoint.removeClass("is-open").addClass("visited"); } else { selectedPoint.addClass("is-open").siblings(".cd-single-point.is-open").removeClass("is-open").addClass("visited"); } }); //close interest point description $(".cd-close-info").on("click", function(event){ event.preventDefault(); $(this).parents(".cd-single-point").eq(0).removeClass("is-open").addClass("visited"); }); //on desktop, switch from product intro div to product mockup div $("#cd-start").on("click", function(event){ event.preventDefault(); //detect the CSS media query using .cd-product-intro::before content value var mq = window.getComputedStyle(document.querySelector(".cd-product-intro"), "::before").getPropertyValue("content"); if(mq == "mobile") { $("body,html").animate({"scrollTop": $($(this).attr("href")).offset().top }, 200); } else { $(".cd-product").addClass("is-product-tour").one("webkitTransitionEnd otransitionend oTransitionEnd msTransitionEnd transitionend", function(){ $(".cd-close-product-tour").addClass("is-visible"); $(".cd-points-container").addClass("points-enlarged").one("webkitAnimationEnd oanimationend msAnimationEnd animationend", function(){ $(this).addClass("points-pulsing"); }); }); } }); //on desktop, switch from product mockup div to product intro div $(".cd-close-product-tour").on("click", function(){ $(".cd-product").removeClass("is-product-tour"); $(".cd-close-product-tour").removeClass("is-visible"); $(".cd-points-container").removeClass("points-enlarged points-pulsing"); });});

dd:

css3图片倾斜3d动画效果相关推荐

css3图片倾斜3D效果
css3图片倾斜3D效果这是一款非常炫酷图片3D倾斜动画,响应式的图片列表布局,鼠标悬停图片3D倾斜遮罩显示标题图标效果. 演示地址下载地址
android开发骰子动画,GitHub - jieyou/dice: 一个css3 3d动画效果的色子（或称骰子？）...
dice -- 3d色子(或称骰子?) 一个css3 3d动画效果的色子完全效果(完全流畅的3d动画.阴影.圆角):Chrome\Firefox\Safari\iOS Safari 6.0+\And ...
【web前端特效源码】使用HTML5+CSS3制作一个会促销广告滚动字幕3D动画效果~~适合初学者~超简单~ |前端开发|IT软件
b站视频演示效果: [web前端特效源码]使用HTML5+CSS3制作一个会促销广告滚动字幕3D动画效果~~适合初学者~超简单~ |前端开发|IT软件效果图: 完整代码: <!DOCTYPE ...
css高清动图,CSS3+PNG实现GIF动画效果
昨天讲到了JavaScript+PNG模拟GIF动画,今天教大家用css3 + PNG实现GIF动画效果.代码很简单主要用到了css3的animation属性,代码如下: @-webkit-keyfr ...
php 3d animation,如何用HTML5的Canvas制作3D动画效果
HTML5的诞生给web前端界带来了不小轰动,像什么动画旋转.图片滑块.图片轮播等等这些3D特效,也引发了不少朋友想要学习HTML5的好奇心.最近我一直在做canvas动画效果,发现canvas这个东 ...
7 款基于 HTML5 Canvas 的超炫 3D 动画效果
在以前,想要在浏览器中实现3D动画效果是非常困难的,但是自从HTML5诞生之后,这就变得十分简单了.遗憾的是,目前的浏览器对3D渲染效果还不是非常理想,尤其是渲染速度,可能用chrome和safari ...
6种css3鼠标滑过动画效果
<html><head><meta charset="utf-8" /><title>6种css3鼠标滑过动画效果</titl ...
html关于实现图片2D,3D翻转效果
如何实现图片2D,3D翻转效果? 直接上代码: 一.2D翻转: /*2D翻转*/ .cartoon_0 {transition: transform 2s/*反转动画关键*/} /*利用hover设置 ...
html图片自动循环,css实现图片循环的动画效果（代码）
本篇文章给大家带来的内容是关于css实现图片循环的动画效果(代码),有一定的参考价值,有需要的朋友可以参考一下,希望对你有所帮助. *{margin: 0;padding: 0;} .robot{ w ...
android 动画x轴旋转,Android Roate3dAnimation实现围绕y轴竖直方向或者绕x轴方向旋转的3d动画效果...
概要: ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ Roate3dAnim ...

css3图片倾斜3d动画效果

css3图片倾斜3d动画效果相关推荐

最新文章

热门文章