HTML5+css3:三d转动木马实际效果相册

日期:2021-01-19 类型:科技新闻 

关键词:微信公众号平台小程序,微信打分小程序,小程序发布,小程序大全,微信小程序编程

这篇blog的目地是由于上篇HTML5 CSS3专题 诱惑的案例 CSS3打造百度搜索贴吧的三d翻牌实际效果中有个有关CSS 三d实际效果的较为关键的专业知识点没讲到,便是perspective和tranlateY

实际效果图:嘿嘿,我把毕业后时的1些相片,做成转动木马,绕着我大文理转动,不忘母校的培养之恩~

1、perspective

perspective特性包含两个特性:none和具备企业的长度值。

在其中perspective特性的默认设置值为none,表明无尽的角度看来三d物件,但看上去是平的。另外一个值<length>接纳1个长度企业超过0的值。并且其企业不可以为百分比值。<length>值越大,角度出現的越远,从而建立1个非常低的强度和十分小的三d室内空间转变。反之,此值越小,角度出現的越近,从而建立1个高强度的角度和1个大中型三d转变。简易1点说:当perspective设定length时,假如越小则表明三d实际效果越显著,你的双眼就越挨近三d物件,反之则反之。

2、transform: translateZ(length)

假定设定了perspective:300px时,设定translateZ的值越小则子元素尺寸越小,当设定值贴近300px时,则好像此元素在眼前,当超出300px之后,则之前抵达你视线的后边,该元素就不能见了。

上例的关键:

1、最先全部的照片的器皿position:absolute,叠加在1起,随后1次设定rotateY各自为40*i ,i= 0 , 1, 2...9 ;全部照片会交叉成1个相近花的样子

2、随后为每一个照片的器皿设定translateZ,全部照片会从对应的角度向外挪动,拓展成1个大圆,即上图实际效果。

html:

<!DOCTYPE html>  
<html>  
<head>  
    <title></title>  
    <meta charset="utf⑻"/>  
    <link href="css/reset.css" rel="stylesheet" type="text/css"/>  
    <script type="text/javascript" src="../../jquery⑴.8.3.js"></script>  
  
    <script type="text/javascript">  
        // alert( 64 / Math.tan(20 / 180 * Math.PI));  
        var transform = function (element, value, key)  
        {  
            key = key || "Transform";  
            ["Moz", "O", "Ms", "Webkit", ""].forEach(function (prefix)  
            {  
                element.style[prefix + key] = value;  
            });  
  
            return element;  
        }  
  
  
        $(function ()  
        {  
            var deg = ⑷0 , i = 1;  
            $("#container").click(function ()  
            {  
                transform($(this)[0], "rotateY(" + (deg * i++) + "deg)")  
            });  
        });  
  
    </script>  
  
     
  
</head>  
<body>  
<div id="stage">  
    <ul id="container">  
        <li>  
            <img src="img/1.jpg"/>  
            <span>Do one thing at a time, and do well..</span>  
        </li>  
        <li>  
            <img src="img/2.jpg"/> <span>Do one thing at a time, and do well..</span>  
        </li>  
        <li>  
            <img src="img/3.jpg"/> <span>Keep on going never give up.</span>  
        </li>  
        <li>  
            <img src="img/4.jpg"/> <span>Whatever is worth doing is worth doing well.</span>  
        </li>  
        <li>  
            <img src="img/5.jpg"/> <span>Believe in yourself.</span>  
        </li>  
        <li>  
            <img src="img/6.jpg"/> <span>Action speak louder than words.</span>  
        </li>  
        <li>  
            <img src="img/7.jpg"/> <span>Never put off what you can do today until tomorrow.</span>  
        </li>  
        <li>  
            <img src="img/8.jpg"/> <span>Jack of all trades and master of none.</span>  
        </li>  
        <li>  
            <img src="img/9.jpg"/> <span>Judge not from appearances.</span>  
        </li>  
    </ul>  
</div>  
</body>  
</html>  

CSS:

li  
{  
    width: 128px;  
    box-shadow: 0 1px 3px rgba(0, 0, 0, .5);  
    position: absolute;  
    bottom: 0;  
}  
  
li img  
{  
    width: 128px;  
    box-shadow: 0 1px 3px rgba(0, 0, 0, .5);  
    vertical-align: middle;  
}  
  
li span  
{  
    display: block;  
    width: 128px;  
    text-align: center;  
    color: #333;  
    font-size: 8px;  
}  
  
#stage  
{  
  
    width: 900px;  
    min-height: 100px;  
    margin-left: auto;  
    margin-right: auto;  
    padding: 100px 50px;  
    -webkit-perspective: 1200px;  
    position: relative;  
}  
  
#container  
{  
    background: url("img/xawl.jpg") no-repeat 0 0;  
    margin-top: 200px;  
    width: 128px;  
    box-shadow: 0 1px 3px rgba(0, 0, 0, .5);  
    height: 100px;  
    margin-left: ⑹4px;  
    -webkit-transition: -webkit-transform 1s;  
    transition: transform 1s;  
    -webkit-transform-style: preserve⑶d;  
    position: absolute;  
    left: 50%;  
}  
  
li:nth-child(0)  
{  
    -webkit-transform: rotateY(0deg) translateZ(300px);  
}  
  
li:nth-child(1)  
{  
    -webkit-transform: rotateY(40deg) translateZ(300px);  
}  
  
li:nth-child(2)  
{  
    -webkit-transform: rotateY(80deg) translateZ(300px);  
}  
  
li:nth-child(3)  
{  
    -webkit-transform: rotateY(120deg) translateZ(300px);  
}  
  
li:nth-child(4)  
{  
    -webkit-transform: rotateY(160deg) translateZ(300px);  
}  
  
li:nth-child(5)  
{  
    -webkit-transform: rotateY(200deg) translateZ(300px);  
}  
  
li:nth-child(6)  
{  
    -webkit-transform: rotateY(240deg) translateZ(300px);  
}  
  
li:nth-child(7)  
{  
    -webkit-transform: rotateY(280deg) translateZ(300px);  
}  
  
li:nth-child(8)  
{  
    -webkit-transform: rotateY(320deg) translateZ(300px);  
}  
  
li:nth-child(9)  
{  
    -webkit-transform: rotateY(360deg) translateZ(300px);  
}  

div#stage做为舞台,设定perspective,每一个li各自设定rotateY,和translateZ;随后大家会div#container设定了-webkit-transform-style: preserve⑶d;transform-style: flat | preserve⑶d在其中flat值为默认设置值,表明全部子元素在2D平面展现。preserve⑶d表明全部子元素在三d室内空间中展现。假如对1个元素设定了transform-style的值为preserve⑶d,它表明不实行平展实际操作,他的全部子元素坐落于三d室内空间中。1般状况下,此特性用于三d动漫实际效果的实行元素,即便是它要运用三d动漫实际效果,因此它的子元素都应当在三d室内空间。

有1点要留意:本事例,实际上正在的动漫实际效果,在于电脑鼠标点一下,div#Container在不端更改rotateY,全部的照片元素均在div#container中,且早已呈现为转动木马实际效果,如今要做的便是转动这个木马,因此只必须每次更改div#container的rotateY 40角度便可。

以上便是本文的所有內容,期待对大伙儿的学习培训有一定的协助,也期待大伙儿多多适用脚本制作之家。