• 天马行空的超级炫酷旋转图片-前端

    一、实现代码（html部分）

    1. html>
    2. <html>
    3. <head lang="en">
    4.     <meta charset="UTF-8">
    5.     <title>3D旋转title>
    6.     <style type="text/css">
    7.         *{padding: 0;
    8.         margin: 0;}
    9.         body,html{height:100%;}
    10.         body{background-image: url("images/beijing.jpg");background-size: 100% 100%;}
    11.         #box{width: 280px;
    12.             height: 400px;
    13.             position: fixed;
    14.             left: 0;
    15.             right: 0;
    16.             top:0;
    17.             bottom: 0;
    18.             margin: auto;
    19.             transform-style: preserve-3d;
    20.             transform: rotateX(0deg) rotateY(0deg);
    21.             animation: go 45s linear infinite;
    22.            }
    23.         #box img{width: 280px;
    24.                  height: 400px;
    25.                  position: absolute;
    26.                  left: 0;
    27.                  top: 0;
    28.         }
    29.         #box img:nth-child(1){
    30.             transform: rotateY(0deg) translateZ(650px);}
    31.         #box img:nth-child(2){
    32.             transform: rotateY(36deg) translateZ(650px);}
    33.         #box img:nth-child(3){
    34.             transform: rotateY(72deg) translateZ(650px);}
    35.         #box img:nth-child(4){
    36.             transform: rotateY(108deg) translateZ(650px);}
    37.         #box img:nth-child(5){
    38.             transform: rotateY(144deg) translateZ(650px);}
    39.         #box img:nth-child(6){
    40.             transform: rotateY(180deg) translateZ(650px);}
    41.         #box img:nth-child(7){
    42.             transform: rotateY(216deg) translateZ(650px);}
    43.         #box img:nth-child(8){
    44.             transform: rotateY(252deg) translateZ(650px);}
    45.         #box img:nth-child(9){
    46.             transform: rotateY(288deg) translateZ(650px);}
    47.         #box img:nth-child(10){
    48.             transform: rotateY(324deg) translateZ(650px);}
    49. 		@keyframes go {
    50. 		    0%{transform: rotateX(0deg) rotateY(0deg);}
    51. 		    25%{transform: rotateX(20deg) rotateY(180deg);}
    52. 		    50%{transform: rotateX(0deg) rotateY(360deg);}
    53. 		    75%{transform: rotateX(-20deg) rotateY(540deg);}
    54. 		    100%{transform: rotateX(0deg) rotateY(720deg);}
    55. 		
    56. 		}
    57.     style>
    58. head>
    59. 	<body>
    60. 		<div id="box">
    61. 		    <img src="images/1.jpg">
    62. 		    <img src="images/2.jpg">
    63. 		    <img src="images/3.jpg">
    64. 		    <img src="images/4.jpg">
    65. 		    <img src="images/5.jpg">
    66. 		    <img src="images/6.jpg">
    67. 		    <img src="images/7.jpg">
    68. 		    <img src="images/8.jpg">
    69. 		    <img src="images/9.jpg">
    70. 		    <img src="images/10.jpg">
    71. 		div>
    72. 	body>
    73. html>

    二、效果展示

  • 相关阅读:
    rust模式
    论文笔记: 图神经网络 GAT
    每天一个数据分析题（三百八十四）- 回归与分类
    SQL2008 用户定义表类型
    农产品直销平台/农场品销售系统
    Automatic differentiation package - torch.autograd
    国产智多晶FPGA基于Verilog的设计开发流程
    FFplay文档解读-6-解码器，视频解码器，音频解码器，字幕解码器
    docker-compose
    #{}和${}的区别
  • 原文地址：https://blog.csdn.net/qq_58546982/article/details/134429828