纯CSS3实现360度旋转特效

纯CSS3实现360度旋转特效

开发工具与关键技术:DW   /css3
作者:多事之秋
撰写时间:2019年2月8日

因为某些原因,撰写时间和发表时间不一致,请原谅;
用简单代码做一个360度旋转特效
在这里插入图片描述
首先创建一个 html

<div class="contant">
		<div class="box">
		<div><img src="img/55555.jpg" alt=""></div>
		<div><img src="img/55555.jpg" alt=""></div>
		<div><img src="img/55555.jpg" alt=""></div>
		<div><img src="img/55555.jpg" alt=""></div>
		<div><img src="img/55555.jpg" alt=""></div>
		<div><img src="img/55555.jpg" alt=""></div>
		<div><img src="img/55555.jpg" alt=""></div>
		<div><img src="img/55555.jpg" alt=""></div>
		<div><img src="img/55555.jpg" alt=""></div>
		<div><img src="img/55555.jpg" alt=""></div>
		<div><img src="img/55555.jpg" alt=""></div>
		<div><img src="img/55555.jpg" alt=""></div>
	</div>
	</div>


然后添加元素属性,CSS代码为:

@charset "utf-8";
/* CSS Document */
*{
	margin: 0;
	padding: 0;
}
body {
  perspective: 500px;
  perspective-origin: 50% 30%;
  background: #E3DFD3;
  overflow: hidden;
}
img{
	width: 100px;
	height: 100px;
}
.contant{
	width: 900px;
	height: 600px;
	margin: auto auto;
	position: relative;
	transform-style: preserve-3d;
	animation: mybt 8s infinite linear ;
}
@keyframes mybt{
	to{
		transform: rotateY(360deg);
	}
}
.box div {
  position: absolute;
  width: 100px;
  height: 111px;
  left: 47%;
  bottom: 50%;
  transform-origin: 50% 0;
  background-image: url( ../img/55555.jpg);
  background-repeat: no-repeat;
  transform-style: preserve-3d;
}
.box div:nth-child(1) {
  transform: rotateY(30deg) translateZ(-300px);
  background-position: 0px 0;
}
.box div:nth-child(2) {
  transform: rotateY(60deg) translateZ(-300px);
  background-position: -100px 0;
}
.box div:nth-child(3) {
  transform: rotateY(90deg) translateZ(-300px);
  background-position: -200px 0;
}
.box div:nth-child(4) {
  transform: rotateY(120deg) translateZ(-300px);
  background-position: -300px 0;
}
.box div:nth-child(5) {
  transform: rotateY(150deg) translateZ(-300px);
  background-position: -400px 0;
}
.box div:nth-child(6) {
  transform: rotateY(180deg) translateZ(-300px);
  background-position: -500px 0;
}
.box div:nth-child(7) {
  transform: rotateY(210deg) translateZ(-300px);
  background-position: -600px 0;
}
.box div:nth-child(8) {
  transform: rotateY(240deg) translateZ(-300px);
  background-position: -700px 0;
}
.box div:nth-child(9) {
  transform: rotateY(270deg) translateZ(-300px);
  background-position: -800px 0;
}
.box div:nth-child(10) {
  transform: rotateY(300deg) translateZ(-300px);
  background-position: -900px 0;
}
.box div:nth-child(11) {
  transform: rotateY(330deg) translateZ(-300px);
  background-position: -1000px 0;
}
.box div:nth-child(12) {
  transform: rotateY(360deg) translateZ(-300px);
  background-position: -1100px 0;
}








































































  • 1
    点赞
  • 2
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
实现炫酷抖音女友3D旋转相册特效,需要掌握CSS3的一些基本动画和转换属性。首先需要准备照片,然后将照片放在一个容器中,设置容器的宽、高、视距、景深。接下来,需要使用CSS3旋转属性将照片进行旋转,同时使用缩放属性进行3D效果的实现。最后再使用CSS3的动画属性和过渡属性,使照片在旋转的过程中呈现出平滑、连贯的效果。具体实现步骤和样式代码如下所示: 1. 创建一个容器,设置容器的宽、高、视距和景深。 ``` .container { width: 600px; height: 400px; perspective: 1000px; -webkit-perspective: 1000px; perspective-origin: 50% 50%; -webkit-perspective-origin: 50% 50%; } ``` 2. 在容器中添加多个照片,将它们定位在正中心,并设置它们的宽和高。 ``` .photo { position: absolute; top: 50%; left: 50%; margin-top: -150px; margin-left: -200px; width: 400px; height: 300px; background-size: cover; background-position: center center; transform-style: preserve-3d; -webkit-transform-style: preserve-3d; } ``` 3. 使用CSS3旋转属性,使照片在Z轴上进行旋转,并使用缩放属性使照片产生3D效果。 ``` .photo:nth-child(1) { transform: rotateY(0deg) translateZ(250px) scale(0.8); -webkit-transform: rotateY(0deg) translateZ(250px) scale(0.8); } .photo:nth-child(2) { transform: rotateY(60deg) translateZ(250px) scale(0.8); -webkit-transform: rotateY(60deg) translateZ(250px) scale(0.8); } .photo:nth-child(3) { transform: rotateY(120deg) translateZ(250px) scale(0.8); -webkit-transform: rotateY(120deg) translateZ(250px) scale(0.8); } .photo:nth-child(4) { transform: rotateY(180deg) translateZ(250px) scale(0.8); -webkit-transform: rotateY(180deg) translateZ(250px) scale(0.8); } .photo:nth-child(5) { transform: rotateY(240deg) translateZ(250px) scale(0.8); -webkit-transform: rotateY(240deg) translateZ(250px) scale(0.8); } .photo:nth-child(6) { transform: rotateY(300deg) translateZ(250px) scale(0.8); -webkit-transform: rotateY(300deg) translateZ(250px) scale(0.8); } ``` 4. 使用CSS3的动画属性和过渡属性,使照片具有平滑、连贯的旋转效果。 ``` .photo:hover { animation: rotate 10s infinite linear; -webkit-animation: rotate 10s infinite linear; transition: all 0.5s ease-in-out; -webkit-transition: all 0.5s ease-in-out; } @keyframes rotate { 0% { transform: rotateY(0deg); } 100% { transform: rotateY(360deg); } } @-webkit-keyframes rotate { 0% { -webkit-transform: rotateY(0deg); } 100% { -webkit-transform: rotateY(360deg); } } ``` 这样就可以实现抖音女友3D旋转相册的特效了。通过使用CSS3旋转、缩放、动画和过渡属性,可以轻松实现多种炫酷的效果,为网页添加生动、有趣的视觉体验。

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值