css3 3d展示中rotate()介绍与简单实现


    最近在了解css3的3d动画效果,学习发现,css3中的3d效果实现还是很好玩的,现在我给你大家简单的介绍一下css3中3d效果的实现。

    我也只是一个初学者,如果在博客中写的不对的地方欢迎指正。

    好了上面啰嗦了半天,现在步入正题,想实现3d效果的实现,最终要的容器属性是transform-style:属性,其中flat默认是2d效果,preserve-3d是3d效果,设置了这个属性它的后代都会表示3d效果,还有另一个重要属性就是perspective:属性,意思是透视,有个大牛曾说没有透视,不成3d,所以这个属性还是很重要的,想要熟悉它,我们就要了解旋转属性,因为rotate属性可以很好的帮助我们理解perspective:属性,其中rotateX是垂直旋转(个人觉得就是上下旋转),rotateY是水平旋转(个人觉得就是左右旋转),还有就是rotateZ咳咳,就是旋转Z轴(不知道该怎么描述)不说啦,直接上效果图:

    从上图就可以清楚的看见rotateZ属性的展现形式了吧,

    相关代码:

.divr{
	transform-style: preserve-3d;
	perspective: 600px;
	width: 300px;
	height: 300px;
	background-color: transparent;
	border: 2px solid grey;
	float: left;
	margin: 60px;
	opacity:0.75;	
}
.divrotatex{
	width: 300px;
	height: 300px;
	background-color: darkorchid;
	transform: rotateX(50deg);
}
.divrotatey{
	width: 300px;
	height: 300px;
	background-color: darkorchid;
	transform: rotateY(50deg);
}
.divrotatez{
	width: 300px;
	height: 300px;
	background-color: darkorchid;
	transform: rotateZ(50deg);
	opacity:0.95;
}

  注:在容器内添加transform-style: preserve-3d;属性和perspective属性,是实现效果的重要属性,其中perspective属性可以有两种书写方式,一种是直接写在父元素内(个人觉得就是容器里),第二种就是应用在当前动画元素上。

打赏

免责声明!

本站转载的文章为个人学习借鉴使用,本站对版权不负任何法律责任。如果侵犯了您的隐私权益,请联系本站邮箱yoyou2525@163.com删除。



 
粤ICP备18138465号  © 2018-2022 CODEPRJ.COM